diff --git a/.changeset/strong-moles-care.md b/.changeset/strong-moles-care.md new file mode 100644 index 0000000..86acfac --- /dev/null +++ b/.changeset/strong-moles-care.md @@ -0,0 +1,5 @@ +--- +"bako-ui": patch +--- + +Add optional placeholder and prevent options menu from opening when it is empty diff --git a/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx b/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx index ef26dea..8aece0a 100644 --- a/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx +++ b/packages/ui/src/components/RhfCombobox/rhf-combobox.tsx @@ -56,6 +56,7 @@ export function RhfCombobox< name, defaultValue, label, + placeholder, error, options, disabled = false, @@ -153,6 +154,8 @@ export function RhfCombobox< } : {}; + const showOptions = isLoadingOptions || collection.items.length > 0; + return ( {label && ( @@ -179,12 +182,13 @@ export function RhfCombobox< onOpenChange={handleOpenChange} onInputValueChange={handleInputValueChange} disabled={disabled} - openOnClick={openOnFocus} + openOnClick={openOnFocus && showOptions} multiple={false} invalid={!!error} allowCustomValue={allowCustomValue} selectionBehavior="preserve" defaultValue={[defaultValue || '']} + placeholder={placeholder} {...slotProps?.root} > @@ -206,42 +210,47 @@ export function RhfCombobox< - + {helperText && {helperText}} {error && {error.message}} - - {!allowCustomValue && ( - {noOptionsText} - )} - - {isLoadingOptions && ( - - - Loading... - - )} - - {!isLoadingOptions && - collection.items.map((item) => ( - - {!item.imageUrl && item.label} - {item.imageUrl && ( - - {`${item.label} - {item.label} - - )} - - - ))} - + {(showOptions || !allowCustomValue) && ( + + {isLoadingOptions && ( + + + Loading... + + )} + + {!isLoadingOptions && + collection.items.length > 0 && + collection.items.map((item) => ( + + {!item.imageUrl && item.label} + {item.imageUrl && ( + + {`${item.label} + {item.label} + + )} + + + ))} + + {!allowCustomValue && + !isLoadingOptions && + collection.items.length === 0 && ( + {noOptionsText} + )} + + )} diff --git a/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx b/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx index 27aa513..a0251d4 100644 --- a/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx +++ b/packages/ui/src/components/RhfCombobox/rhf-combobox.types.tsx @@ -18,6 +18,7 @@ export type RhfComboboxProps< > = UseControllerProps & { options: RhfComboboxOptions[]; label?: string; + placeholder?: string; helperText?: string; disabled?: boolean; error?: FieldError;