diff --git a/packages/combobox/examples/simulated-change.example.js b/packages/combobox/examples/simulated-change.example.js index ff32f689e..5fb92f057 100644 --- a/packages/combobox/examples/simulated-change.example.js +++ b/packages/combobox/examples/simulated-change.example.js @@ -9,7 +9,7 @@ import { import { useCityMatch } from "./utils"; import "@reach/combobox/styles.css"; -let name = "Controlled"; +let name = "Simulated Change"; function Example() { let [term, setTerm] = React.useState("Detroit"); @@ -35,8 +35,8 @@ function Example() {

Clientside Search

This example tests that changes to the controlled value of Combobox - don't trigger it to open unless we are actually typing. The initial - value and programmatically set value here shouldn't open the Popover. + don't expand it unless we are actually typing. The initial value and + programmatically set value here shouldn't open the Popover.

Selection: {selection}

Term: {term}

diff --git a/packages/combobox/src/index.tsx b/packages/combobox/src/index.tsx index dad3917ab..af525f1f4 100644 --- a/packages/combobox/src/index.tsx +++ b/packages/combobox/src/index.tsx @@ -486,10 +486,10 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput( (controlledValue!.trim() === "" ? (value || "").trim() !== "" : true) ) { handleValueChange(controlledValue!); - // After we handled the changed value, we need to make sure the next - // controlled change won't trigger a CHANGE event. (instead of a SIMULATED_CHANGE) - inputValueChangedRef.current = false; } + // After we handled the changed value, we need to make sure the next + // controlled change won't trigger a CHANGE event. (instead of a SIMULATED_CHANGE) + inputValueChangedRef.current = false; }, [controlledValue, handleValueChange, isControlled, value]); // [*]... and when controlled, we don't trigger handleValueChange as the