diff --git a/packages/ui/lib/components/Form/Combobox.tsx b/packages/ui/lib/components/Form/Combobox.tsx index c357edb5371..6e9e0a3998f 100644 --- a/packages/ui/lib/components/Form/Combobox.tsx +++ b/packages/ui/lib/components/Form/Combobox.tsx @@ -76,15 +76,20 @@ export function Combobox({ [query, allOptions] ) - // Determine which options to display based on showMoreOptions state + // Determine which options to display based on showMoreOptions state and search query const displayedOptions = useMemo(() => { + // When searching, show all filtered results + if (query !== '') { + return filteredOptions + } + // When not searching, respect showMoreOptions state if (showMoreOptions) { return filteredOptions } return filteredOptions.filter((option) => options.some((initialOption) => initialOption.value === option.value) ) - }, [filteredOptions, showMoreOptions, options]) + }, [filteredOptions, showMoreOptions, options, query]) const handleSelect = (value: Option) => { setSelected(value) @@ -260,36 +265,38 @@ export function Combobox({ {option.label} ))} - {/* Show "More options" button if there are more options available */} - {!showMoreOptions && moreOptions.length > 0 && ( -
  • - (optionsRef.current[displayedOptions.length] = el) - } - className={clsx( - 'flex cursor-pointer mx-2 rounded-sm items-center justify-center gap-2 py-3 px-3 text-base font-semibold', - 'hover:bg-ui-main-50 text-brand-ui-primary', - 'border-t border-gray-200', - focusedIndex === displayedOptions.length && - 'bg-ui-main-50' - )} - onClick={handleShowMore} - onKeyDown={(e) => { - if (e.key === 'Enter') { - handleShowMore() - } else { - handleKeyDown(e) + {/* Show "More options" button only when not searching and there are more options available */} + {!showMoreOptions && + query === '' && + moreOptions.length > 0 && ( +
  • + (optionsRef.current[displayedOptions.length] = el) } - }} - role="option" - tabIndex={ - focusedIndex === displayedOptions.length ? 0 : -1 - } - > - - More options -
  • - )} + className={clsx( + 'flex cursor-pointer mx-2 rounded-sm items-center justify-center gap-2 py-3 px-3 text-base font-semibold', + 'hover:bg-ui-main-50 text-brand-ui-primary', + 'border-t border-gray-200', + focusedIndex === displayedOptions.length && + 'bg-ui-main-50' + )} + onClick={handleShowMore} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handleShowMore() + } else { + handleKeyDown(e) + } + }} + role="option" + tabIndex={ + focusedIndex === displayedOptions.length ? 0 : -1 + } + > + + More options + + )} ) : (
  • diff --git a/unlock-app/src/components/content/event/Form.tsx b/unlock-app/src/components/content/event/Form.tsx index 046fcb4404d..2786b16598f 100644 --- a/unlock-app/src/components/content/event/Form.tsx +++ b/unlock-app/src/components/content/event/Form.tsx @@ -16,6 +16,7 @@ import { ToggleSwitch, ImageUpload, Checkbox, + Combobox, } from '@unlock-protocol/ui' import { useConfig } from '~/utils/withConfig' import { NetworkDescription } from '~/components/interface/locks/Create/elements/CreateLockForm' @@ -325,40 +326,52 @@ export const Form = ({ onSubmit, compact = false }: FormProps) => { error={errors.metadata?.description?.message as string} /> - { - setEventSlug(newValue?.toString() || '') - setIsEventSelected(newValue !== undefined && newValue !== '') - }} + { + setEventSlug(selected.value.toString()) + setIsEventSelected(true) + }} + placeholder="Select an event" + searchPlaceholder="Search events..." label="Your Existing Events" - defaultValue={ - userEventsOptions.length > 0 ? userEventsOptions[0].value : '' - } description="Select an event from your existing events." disabled={isSubmitting} />