diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx index c301d755c..c11e72656 100644 --- a/packages/design-system/lib/components/Select/SelectFilter.tsx +++ b/packages/design-system/lib/components/Select/SelectFilter.tsx @@ -45,7 +45,7 @@ function ComboBoxInner({ // Get the state for the ComboBox from RAC const comboBoxState = useContext(ComboBoxStateContext) - const { isFocused, selectedKey, inputValue } = comboBoxState ?? {} + const { isFocused, inputValue, selectedItem } = comboBoxState ?? {} // Act after render useEffect(() => { @@ -54,7 +54,7 @@ function ComboBoxInner({ // We only want to act on focused field which has rerendered due to // changes to its input value. Selecting a value will also rerender, but // that we want to ignore as that is not a change to its input value. - if (isFocused && selectedKey !== inputValue) { + if (isFocused && selectedItem?.textValue !== inputValue) { // The simlulated event has to originate from the input field. if (inputRef.current) { // Simulate a press on down arrow key. @@ -76,7 +76,7 @@ function ComboBoxInner({ clearTimeout(timeout) } } - }, [inputRef, inputValue, isFocused, selectedKey]) + }, [inputRef, inputValue, isFocused, selectedItem?.textValue]) return children }