From 2f9f00383ecb0fc34e725fcc7187186a93e8ab6d Mon Sep 17 00:00:00 2001
From: "Snow@Moana" <snow@hol.ly>
Date: Tue, 31 Mar 2026 07:39:08 +1100
Subject: [PATCH 1/3] Restore v1 creatable behaviour.

---
 fields/core/select/edit-component.tsx | 66 +++++++++++++++++++++++++--
 fields/core/select/index.tsx          | 11 +++--
 2 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/fields/core/select/edit-component.tsx b/fields/core/select/edit-component.tsx
index c0f4c432a..d819d088c 100644
--- a/fields/core/select/edit-component.tsx
+++ b/fields/core/select/edit-component.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { PlusIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   Combobox,
@@ -37,11 +38,14 @@ const EditComponent = (props: any) => {
   const { value, field, onChange } = props;
   const isReadonly = Boolean(field?.readonly);
   const multiple = Boolean(field.options?.multiple);
+  const creatable = Boolean(field.options?.creatable);
   const storeAsObject =
     field?.type === "reference" && field.options?.store === "object";
   const anchor = useComboboxAnchor();
+  const [inputValue, setInputValue] = useState("");
 
-  const options = useMemo(
+  // The static options defined in the field schema
+  const baseOptions = useMemo(
     () =>
       Array.isArray(field.options?.values)
         ? field.options.values.map(normalizeOption)
@@ -49,6 +53,41 @@ const EditComponent = (props: any) => {
     [field.options?.values],
   );
 
+  // When creatable, also include any already-selected free-form values that
+  // aren't in the static list, so they display correctly when the form loads.
+  const options = useMemo(() => {
+    if (!creatable) return baseOptions;
+
+    const existingValues = new Set(baseOptions.map((o) => o.value));
+    const selectedItems = multiple
+      ? (Array.isArray(value) ? value : [])
+      : (value != null && value !== "" ? [value] : []);
+
+    const extra: Option[] = selectedItems
+      .map((v: any) =>
+        typeof v === "object" && v !== null ? normalizeOption(v) : { value: String(v), label: String(v) }
+      )
+      .filter((o: Option) => o.value !== "" && !existingValues.has(o.value));
+
+    return extra.length > 0 ? [...baseOptions, ...extra] : baseOptions;
+  }, [baseOptions, creatable, value, multiple]);
+
+  // Synthetic "Create …" option shown when the typed value doesn't match anything
+  const createOption = useMemo<Option | null>(() => {
+    if (!creatable || !inputValue.trim()) return null;
+    const trimmed = inputValue.trim();
+    const alreadyExists = options.some(
+      (o) => o.value.toLowerCase() === trimmed.toLowerCase(),
+    );
+    return alreadyExists ? null : { value: trimmed, label: `Create "${trimmed}"` };
+  }, [creatable, inputValue, options]);
+
+  // Full list passed to the Combobox
+  const allOptions = useMemo(
+    () => (createOption ? [...options, createOption] : options),
+    [options, createOption],
+  );
+
   const selectedValue = useMemo(() => {
     if (multiple) {
       const values = Array.isArray(value) ? value : [];
@@ -84,6 +123,7 @@ const EditComponent = (props: any) => {
 
   const handleValueChange = (nextValue: Option[] | Option | null) => {
     if (isReadonly) return;
+    setInputValue("");
     const toOutput = (option: Option) =>
       storeAsObject ? option : option.value;
 
@@ -97,13 +137,15 @@ const EditComponent = (props: any) => {
 
   return (
     <Combobox
-      items={options}
+      items={allOptions}
       multiple={multiple}
       value={selectedValue as any}
       onValueChange={handleValueChange as any}
+      onInputValueChange={creatable && !isReadonly ? setInputValue : undefined}
       readOnly={isReadonly}
       isItemEqualToValue={(item, selected) => item.value === selected?.value}
       autoHighlight
+      filter={creatable ? null : undefined}
     >
       {multiple ? (
         <>
@@ -135,7 +177,14 @@ const EditComponent = (props: any) => {
             <ComboboxList>
               {(option: Option) => (
                 <ComboboxItem key={option.value} value={option}>
-                  {option.label}
+                  {creatable && option.value === createOption?.value ? (
+                    <>
+                      <PlusIcon className="mr-1 size-3.5 shrink-0" />
+                      {option.label}
+                    </>
+                  ) : (
+                    option.label
+                  )}
                 </ComboboxItem>
               )}
             </ComboboxList>
@@ -154,7 +203,14 @@ const EditComponent = (props: any) => {
             <ComboboxList>
               {(option: Option) => (
                 <ComboboxItem key={option.value} value={option}>
-                  {option.label}
+                  {creatable && option.value === createOption?.value ? (
+                    <>
+                      <PlusIcon className="mr-1 size-3.5 shrink-0" />
+                      {option.label}
+                    </>
+                  ) : (
+                    option.label
+                  )}
                 </ComboboxItem>
               )}
             </ComboboxList>
diff --git a/fields/core/select/index.tsx b/fields/core/select/index.tsx
index 0b2f7e450..0d69c815b 100644
--- a/fields/core/select/index.tsx
+++ b/fields/core/select/index.tsx
@@ -3,6 +3,7 @@ import { Field } from "@/types/field";
 import { EditComponent } from "./edit-component";
 
 const schema = (field: Field) => {
+  const creatable = Boolean(field.options?.creatable);
   const normalizedValues = Array.isArray(field.options?.values)
     ? field.options.values.map((item) => (
         typeof item === "object"
@@ -13,10 +14,12 @@ const schema = (field: Field) => {
   const min = typeof field.options?.min === "number" ? field.options.min : undefined;
   const max = typeof field.options?.max === "number" ? field.options.max : undefined;
 
-  const optionSchema = z.string().refine(
-    (value) => normalizedValues.includes(value),
-    { message: normalizedValues.length === 0 ? "This select field requires options.values" : "Invalid option" }
-  );
+  const optionSchema = creatable
+    ? z.string()
+    : z.string().refine(
+        (value) => normalizedValues.includes(value),
+        { message: normalizedValues.length === 0 ? "This select field requires options.values" : "Invalid option" }
+      );
 
   if (field.options?.multiple) {
     let zodSchema = z.array(optionSchema);

From 636c0409975e7bb6d9fd37d376fe31b9a66ab474 Mon Sep 17 00:00:00 2001
From: "Snow@Moana" <snow@hol.ly>
Date: Wed, 1 Apr 2026 06:32:14 +1100
Subject: [PATCH 2/3] Fix types.

---
 fields/core/select/edit-component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/fields/core/select/edit-component.tsx b/fields/core/select/edit-component.tsx
index d819d088c..1a9918f3a 100644
--- a/fields/core/select/edit-component.tsx
+++ b/fields/core/select/edit-component.tsx
@@ -58,7 +58,7 @@ const EditComponent = (props: any) => {
   const options = useMemo(() => {
     if (!creatable) return baseOptions;
 
-    const existingValues = new Set(baseOptions.map((o) => o.value));
+    const existingValues = new Set(baseOptions.map((o: Option) => o.value));
     const selectedItems = multiple
       ? (Array.isArray(value) ? value : [])
       : (value != null && value !== "" ? [value] : []);
@@ -77,7 +77,7 @@ const EditComponent = (props: any) => {
     if (!creatable || !inputValue.trim()) return null;
     const trimmed = inputValue.trim();
     const alreadyExists = options.some(
-      (o) => o.value.toLowerCase() === trimmed.toLowerCase(),
+      (o: Option) => o.value.toLowerCase() === trimmed.toLowerCase(),
     );
     return alreadyExists ? null : { value: trimmed, label: `Create "${trimmed}"` };
   }, [creatable, inputValue, options]);

From 718a958d6bf99976a96cad215a5f459008388f7d Mon Sep 17 00:00:00 2001
From: "Snow@Moana" <snow@hol.ly>
Date: Wed, 1 Apr 2026 07:40:56 +1100
Subject: [PATCH 3/3] Add filter function.

---
 fields/core/select/edit-component.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/fields/core/select/edit-component.tsx b/fields/core/select/edit-component.tsx
index 1a9918f3a..2b5493a96 100644
--- a/fields/core/select/edit-component.tsx
+++ b/fields/core/select/edit-component.tsx
@@ -135,6 +135,16 @@ const EditComponent = (props: any) => {
     onChange(nextValue ? toOutput(nextValue as Option) : null);
   };
 
+  const filterFn =  (option: Option, inputVal: string) => {
+    // Always show the create option, let others match by label
+    if (creatable && createOption && option.value === createOption.value) {
+      // show "Create..." if it should be shown
+      return true;
+    }
+    // Standard case-insensitive substring match for filtering
+    return option.label.toLowerCase().includes(inputVal.trim().toLowerCase());
+  };
+
   return (
     <Combobox
       items={allOptions}
@@ -145,7 +155,7 @@ const EditComponent = (props: any) => {
       readOnly={isReadonly}
       isItemEqualToValue={(item, selected) => item.value === selected?.value}
       autoHighlight
-      filter={creatable ? null : undefined}
+      filter={filterFn}
     >
       {multiple ? (
         <>