[Combobox] Respect openOnFocus property, and prevent popover close on input clear

[linden-dg]

🚀 Feature request

Current Behavior

As per #655, currently when the combobox input is cleared (i.e. the value changes to an empty string) the combobox popover is closed.

This happens even when the openOnFocus prop is set to true. This leads to a strange interaction where,

• when you first click/focus on the input the ComboboxPopover opens
• then type something in the input, the popover remains open
• and then delete the text from the input and the popover then closes even though the input still has focus

If you then focus on another element, then back to the input, the popover reopens - though again, nothing has changed in the input.

Desired Behavior

While the input is focused, the ComboboxPopover should always remain open, and should only close when focus is lost.

Suggested Solution

Either make the openOnFocus prop override the automatic close/hide functionality of the ComboboxPopover, or if that isn't the intended behaviour, add a new prop such as keepOpenOnClear (which defaults to false) that can be used in conjunction with openOnFocus to prevent unwanted closing of the popover.

Who does this impact? Who is this for?

For developers who want all of the options displayed when there is the input is empty - which allows users to quickly select an option without necessarily needing to type. This functionality is already there when the Combobox is first focused, but is lost when the input is subsequently cleared.

Describe alternatives you've considered

As mentioned in #655, the workaround described in #367 (comment) is unsatisfactory from a UX perspective.

Additional context

This was already requested in #367 and #655, but the issue was closed due to inactivity.

[indiesquidge]

Playing around with it more, I could see the value in wanting the popover to remain open when the input is cleared to show some results. The current workaround is to use the openOnFocus prop and, when the input is cleared, blur and re-focus the input to show the results.

I created a branch that keeps the popover visible even when the input is cleared when openOnFocus is true if you'd like to experiment with it.

I can't decide if it's a good solution to change the behavior of openOnFocus though. Technically speaking, openOnFocus does entirely what it claims to do: open the popover on focus. It makes no claims on what happens when the input is cleared, and adding that behavior could be unexpected/unwanted for some folks.

If this feature is something we'd like to support, perhaps it being a separate prop (e.g. closeOnClear,keepOpenOnClear, etc) would make more sense semantically and would avoid the unexpected additional behavior of openOnFocus doing more than opening on focus. However, I also don't love the idea of having yet another boolean prop™ for this library to maintain and keep tabs on as things evolve.

@chaance I'd be curious to hear your thoughts on what to do here.

[ocNVO]

Any updates on this ?

[WPaczula]

I'm also interested in this enhancement, this would be a good UX feature 🙌

[chaance]

No progress here as I haven't had time to think about features. With what little time I do have to work on Reach, I've got a few bugs I'm trying to knock out first. That said, I'm interested in this one and would like to explore it a bit when I can.

[geekus]

In my opinion, this (close on clear) is hardly a feature request, but rather unexpected behavior and a bug. Checking a few other similar plugins (react-select.com, select2.org, mui.com/material-ui/react-autocomplete, semantic-ui.com/modules/dropdown.html), they all stay open when field/value is cleared.