Skip to content

[combobox] Fix binding value undesirely expands combobox#783

Merged
chaance merged 2 commits intoreach:developfrom
dlacaille:fix/binding-value-undesirely-expands-combobox
Oct 17, 2021
Merged

[combobox] Fix binding value undesirely expands combobox#783
chaance merged 2 commits intoreach:developfrom
dlacaille:fix/binding-value-undesirely-expands-combobox

Conversation

@dlacaille
Copy link
Copy Markdown
Contributor

@dlacaille dlacaille commented Apr 14, 2021 •
edited
Loading

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
Copy link
Copy Markdown

codesandbox-ci Bot commented Apr 14, 2021

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

@chaance chaance added Status: In Progress Type: Bug Something isn't working labels Apr 21, 2021
@adalinesimonian
Copy link
Copy Markdown

adalinesimonian commented May 13, 2021 •
edited
Loading

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
Copy link
Copy Markdown

karlwills commented May 20, 2021

@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
Copy link
Copy Markdown
Collaborator

indiesquidge commented May 20, 2021 •
edited
Loading

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
Copy link
Copy Markdown

pablo-abc commented Jul 21, 2021

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 chaance merged commit 8bd5b5c into reach:develop Oct 17, 2021
@chaance
Copy link
Copy Markdown
Member

chaance commented Oct 17, 2021

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.

@chaance chaance mentioned this pull request Oct 19, 2021
Open
chaance added a commit that referenced this pull request Oct 19, 2021
@chaance
[combobox] Revert #783
55e1d8c 
This PR introduced regression in some cases where the popover doesn't
open until the user presses the down or up key after initial input.
See #755 for the related issue.
@danielsimao danielsimao mentioned this pull request Jan 12, 2022
Open
@david-crespo david-crespo mentioned this pull request May 19, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Status: In Progress Type: Bug Something isn't working

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[combobox] Binding value undesirely expands combobox

6 participants

@dlacaille @adalinesimonian @karlwills @indiesquidge @pablo-abc @chaance