Skip to content

Commit 6d23997

Browse files
authored
Fixing fully controlled combobox aria example (#1576)
1 parent 14c9ab2 commit 6d23997

File tree

1 file changed

+12
-11
lines changed

1 file changed

+12
-11
lines changed

packages/@react-aria/combobox/docs/useComboBox.mdx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -477,19 +477,20 @@ function ControlledComboBox() {
477477

478478
// Implement custom filtering logic and control what items are
479479
// available to the ComboBox.
480-
// Memoize filteredItems so it updates when the inputValue updates.
481480
let {startsWith} = useFilter({sensitivity: 'base'});
482-
let filteredItems = React.useMemo(() => optionList.filter(item => startsWith(item.name, fieldState.inputValue)), [optionList, fieldState.inputValue]);
483481

484482
// Specify how each of the ComboBox values should change when an
485483
// option is selected from the list box
486484
let onSelectionChange = (key) => {
487-
setFieldState(prevState => ({
488-
isOpen: false,
489-
inputValue: prevState.items.find(option => option.id === key)?.name ?? '',
490-
selectedKey: key,
491-
items: prevState.items
492-
}));
485+
setFieldState(prevState => {
486+
let selectedItem = prevState.items.find(option => option.id === key);
487+
return ({
488+
isOpen: false,
489+
inputValue: selectedItem?.name ?? '',
490+
selectedKey: key,
491+
items: optionList.filter(item => startsWith(item.name, selectedItem?.name ?? ''))
492+
})
493+
});
493494
};
494495

495496
// Specify how each of the ComboBox values should change when the input
@@ -499,7 +500,7 @@ function ControlledComboBox() {
499500
isOpen: true,
500501
inputValue: value,
501502
selectedKey: value === '' ? null : prevState.selectedKey,
502-
items: filteredItems
503+
items: optionList.filter(item => startsWith(item.name, value))
503504
}));
504505
};
505506

@@ -519,10 +520,10 @@ function ControlledComboBox() {
519520
return (
520521
<ComboBox
521522
label="Favorite Animal"
522-
items={filteredItems}
523+
items={fieldState.items}
523524
selectedKey={fieldState.selectedKey}
524525
inputValue={fieldState.inputValue}
525-
isOpen={fieldState.isOpen && filteredItems.length > 0}
526+
isOpen={fieldState.isOpen && fieldState.items.length > 0}
526527
onOpenChange={onOpenChange}
527528
onSelectionChange={onSelectionChange}
528529
onInputChange={onInputChange}>

0 commit comments

Comments
 (0)