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

🐛 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 https://github.com/reach/reach-ui/commit/d3836a67c7072f4277ef47078737fc3962d82b29 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

[chaance]

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.

[tomstaveley]

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