Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Combobox] Controlled component doesn't close popover on select #483

Open
jbachhardie opened this issue Feb 20, 2020 · 7 comments
Open

[Combobox] Controlled component doesn't close popover on select #483

jbachhardie opened this issue Feb 20, 2020 · 7 comments
Labels
Type: Bug Something isn't working

Comments

@jbachhardie
Copy link

馃悰 Bug report

Current Behavior

When a value is selected on a controlled Combobox the onSelect callback fires but the popover does not close

Expected behavior

The popover should close when an item is selected

Reproducible example

https://codesandbox.io/s/musing-thunder-rmzvv

Suggested solution(s)

It seems this was introduced in d3836a6 when the callbacks went from being fired before an action was sent to the reducer to them being called inside the reducer. This means that the combobox context value updates before the controlled value which triggers a state where the combobox receives a change in controlled value and reopens the popover immediately after closing it.

I think the best solution would be in a controlled component to never update the combobox context's internal value except in the controlled component specific handleValueChange in ComboboxInput. This would require setting some sort of "controlled" flag in the combobox state but would prevent future race conditions like this.

Additional context

Your environment

Software Name(s) Version
Reach Package @reach/combobox 0.8.4
React 16.11.0
Browser Multiple
Assistive tech N/A
Node N/A
npm/yarn yarn 1.19.1
Operating System Multiple
@enforce-template-use
Copy link

Thank you for opening this issue

@chaance chaance added the Type: Bug Something isn't working label Feb 20, 2020
@chaance
Copy link
Member

chaance commented Feb 21, 2020

Fixed in 0.8.5

@avatsavirs
Copy link

I'm facing the same problem while using a controlled input component in @reach/combobox 0.15.0
Codesandbox for reference: https://codesandbox.io/s/compassionate-burnell-yguqk

@norman-ags
Copy link

norman-ags commented Nov 24, 2021

Hi, this is still happening in ^0.16

repro: https://codesandbox.io/s/sweet-galileo-kzkpb?file=/src/index.js

@WPaczula
Copy link

WPaczula commented Dec 9, 2021

Same here, I just got this when upgrading a minor it wasn't there in 0.16.1

@chaance
Copy link
Member

chaance commented Dec 9, 2021

I'd recommend downgrading for the moment, I'm still working on this one as time allows. Sorry about that!

The latest update fixed another bug but seems to have caused a regression here, so I need to make sure they are both resolved before I release the next patch.

@chaance chaance reopened this Dec 9, 2021
@tomstaveley
Copy link

I'm seeing this behaviour from v0.16.0 onwards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants