@@ -477,19 +477,20 @@ function ControlledComboBox() {
477
477
478
478
// Implement custom filtering logic and control what items are
479
479
// available to the ComboBox.
480
- // Memoize filteredItems so it updates when the inputValue updates.
481
480
let {startsWith} = useFilter ({sensitivity: ' base' });
482
- let filteredItems = React .useMemo (() => optionList .filter (item => startsWith (item .name , fieldState .inputValue )), [optionList , fieldState .inputValue ]);
483
481
484
482
// Specify how each of the ComboBox values should change when an
485
483
// option is selected from the list box
486
484
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
+ });
493
494
};
494
495
495
496
// Specify how each of the ComboBox values should change when the input
@@ -499,7 +500,7 @@ function ControlledComboBox() {
499
500
isOpen: true ,
500
501
inputValue: value ,
501
502
selectedKey: value === ' ' ? null : prevState .selectedKey ,
502
- items: filteredItems
503
+ items: optionList . filter ( item => startsWith ( item . name , value ))
503
504
}));
504
505
};
505
506
@@ -519,10 +520,10 @@ function ControlledComboBox() {
519
520
return (
520
521
<ComboBox
521
522
label = " Favorite Animal"
522
- items = { filteredItems }
523
+ items = { fieldState . items }
523
524
selectedKey = { fieldState .selectedKey }
524
525
inputValue = { fieldState .inputValue }
525
- isOpen = { fieldState .isOpen && filteredItems .length > 0 }
526
+ isOpen = { fieldState .isOpen && fieldState . items .length > 0 }
526
527
onOpenChange = { onOpenChange }
527
528
onSelectionChange = { onSelectionChange }
528
529
onInputChange = { onInputChange } >
0 commit comments