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}
/>
-