fix(LOY-245): close dropdown when selecting value

This commit is contained in:
Christian Andolf
2025-06-03 10:11:54 +02:00
parent 52d266b357
commit 0b339e52a6

View File

@@ -45,7 +45,7 @@ function ComboBoxInner({
// Get the state for the ComboBox from RAC // Get the state for the ComboBox from RAC
const comboBoxState = useContext(ComboBoxStateContext) const comboBoxState = useContext(ComboBoxStateContext)
const { isFocused, selectedKey, inputValue } = comboBoxState ?? {} const { isFocused, inputValue, selectedItem } = comboBoxState ?? {}
// Act after render // Act after render
useEffect(() => { useEffect(() => {
@@ -54,7 +54,7 @@ function ComboBoxInner({
// We only want to act on focused field which has rerendered due to // 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 // 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. // 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. // The simlulated event has to originate from the input field.
if (inputRef.current) { if (inputRef.current) {
// Simulate a press on down arrow key. // Simulate a press on down arrow key.
@@ -76,7 +76,7 @@ function ComboBoxInner({
clearTimeout(timeout) clearTimeout(timeout)
} }
} }
}, [inputRef, inputValue, isFocused, selectedKey]) }, [inputRef, inputValue, isFocused, selectedItem?.textValue])
return children return children
} }