[combobox] Fix binding value undesirely expands combobox

[dlacaille]

Closes #755

This pull request fixes an issue where binding a controlled value undesirely expands combobox.

The change addsinputValueChangedRef to ComboboxInput and a new event type SIMULATED_CHANGE.

When the input triggers onChange, we set inputValueChangedRef to true and reset it to false after we detect a controlled value change. When a change is detected, we call CHANGE only if this value is true, otherwise we call SIMULATED_CHANGE. This deprecates the INITIAL_CHANGE event type as it becomes a SIMULATED_CHANGE.

---

Thank you for contributing to Reach UI! Please
fill in this template before submitting your PR to help us process your request more quickly.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code (Compile and run).
• Add or edit tests to reflect the change (Run with yarn test).
• Add or edit Storybook examples to reflect the change (Run with yarn start).
• Ensure formatting is consistent with the project's Prettier configuration.
• Add documentation to support any new features.

This pull request:

• Creates a new package
• Fixes a bug in an existing package
• Adds additional features/functionality to an existing package
• Updates documentation or example code
• Other

If creating a new package:

• Make sure the new package directory contains each of the following, and that their structure/formatting mirrors other related examples in the project:
  • examples directory
  • src directory with an index.tsx entry file
  • At least one example file per feature introduced by the new package
  • Base styles in a style.css file (if needed by the new package)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3112a81:

Sandbox	Source
reach-ui-template	Configuration

[adalinesimonian]

Really looking forward to this fix. I have a component that allows selecting named colours as well as using a colour picker. Every time the colour picker updates the combobox input the entire list of colours pops up - not exactly the behaviour one would expect. Any updates on this PR?

[karlwills]

@adalinesimonian Same, I'm wondering how long it typically takes for a PR to be reviewed and merged? We have a similar issue where setting the value dynamically automatically expands the combobox when we don't need/want it to

[indiesquidge]

We understand why this might be necessary, but this library does not currently have full-time support, and we want to consider the API and issues with #755 a bit more before merging.

Keep in mind that you can always patch this behavior in the mean time if you'd like with https://www.npmjs.com/package/patch-package

[pablo-abc]

Would it be correct to assume that the Combobox's popover should ONLY open when its ComboboxInput has focus? I had made a patch for this as well and later I saw this PR already existed. Our solutions where quite similar except on the fact that I used an isFocusedRef: https://github.com/pablo-abc/reach-ui/pull/1/files (I made a PR on my own fork to not clutter this repo).

Basically I'm only calling transition(CHANGE, { value }) only if isFocusedRef.current === true. Is there a situation on which the popover might be needed to open when the input does not have focus?

[chaance]

This looks great, thanks @dlacaille! Added a test and updated the storybook index since we updated some of that stuff internally since this PR was created.