diff --git a/packages/@react-spectrum/combobox/docs/ComboBox.mdx b/packages/@react-spectrum/combobox/docs/ComboBox.mdx index bd6c842c195..a38e7a3644a 100644 --- a/packages/@react-spectrum/combobox/docs/ComboBox.mdx +++ b/packages/@react-spectrum/combobox/docs/ComboBox.mdx @@ -592,7 +592,7 @@ function Example() { label="To:" validationState={isValid ? 'valid' : 'invalid'} defaultItems={options} - value={value} + inputValue={value} onInputChange={setValue} placeholder="Enter recipient email" allowsCustomValue> @@ -607,7 +607,9 @@ By default, ComboBox uses a string "contains" filtering strategy when deciding w by filtering the list of items yourself and passing the filtered list to the ComboBox via the `items` prop. The example below uses a string "startsWith" filter function obtained from the `useFilter` hook to display items that start with the ComboBox's current input -value only. +value only. By using the `menuTrigger` returned by `onOpenChange`, it also handles displaying the entire option list regardless of the current filter value when the ComboBox menu is +opened via the trigger button or arrow keys. `menuTrigger` tells you if the menu was opened manually by the user ("manual"), by focusing the ComboBox ("focus"), or by +changes in the input field ("input"), allowing you to make updates to other controlled aspects of your ComboBox accordingly. ```tsx example function Example() { @@ -623,17 +625,28 @@ function Example() { {id: 9, email: 'subscribe@email.com'} ]; - let {startsWith} = useFilter({sensitivity: 'base'}); + let [showAll, setShowAll] = React.useState(false); let [filterValue, setFilterValue] = React.useState(''); + let {startsWith} = useFilter({sensitivity: 'base'}); let filteredItems = React.useMemo(() => options.filter(item => startsWith(item.email, filterValue)), [options, filterValue]); return ( { + // Show all items if menu is opened manually + // i.e. by the arrow keys or trigger button + if (menuTrigger === 'manual' && isOpen) { + setShowAll(true); + } + }} width="size-3000" label="To:" - items={filteredItems} - value={filterValue} - onInputChange={setFilterValue} + items={showAll ? options : filteredItems} + inputValue={filterValue} + onInputChange={(value) => { + setShowAll(false); + setFilterValue(value); + }} placeholder="Enter recipient email" allowsCustomValue> {item => {item.email}}