diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index 50b93d5b7..294103014 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -97,6 +97,15 @@ export const Combobox = ({
keys: ['selectedLabel', 'label'],
sorter: (items) => items, // preserve original order, don't sort by match
})
+ // If the user has typed in a value that isn't in the list,
+ // add it as an option if `allowArbitraryValues` is true
+ if (
+ allowArbitraryValues &&
+ query.length > 0 &&
+ !filteredItems.some((i) => i.selectedLabel === query)
+ ) {
+ filteredItems.push({ value: query, label: query, selectedLabel: query })
+ }
const zIndex = usePopoverZIndex()
const id = useId()
return (
@@ -184,19 +193,6 @@ export const Combobox = ({
className={`ox-menu pointer-events-auto ${zIndex} relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border !outline-none border-secondary [--anchor-gap:13px] empty:hidden`}
modal={false}
>
- {allowArbitraryValues && filteredItems.length === 0 && (
-
-
- Use
- {query}
-
-
- )}
- {!allowArbitraryValues && filteredItems.length === 0 && (
-
- No items match
-
- )}
{filteredItems.map((item) => (
@@ -219,6 +215,11 @@ export const Combobox = ({
)}
))}
+ {!allowArbitraryValues && filteredItems.length === 0 && (
+
+ No items match
+
+ )}
)}