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
+
+ )} )}