Multiple select search dropdown input field is too small

[Brqqq]

Bug Report

Steps

1. In a multiple select search dropdown with no values, click inside the dropdown once to open it
2. Click a second time somewhere on the very right inside the dropdown. Notice how your cursor still indicates as if you're hovering over an input field.
3. Try to type a search query

Expected Result

The focus should be on the input, so you can type your search query

Actual Result

The focus is not on the input, meaning you can't type. Instead you have to click the most left part to get focus.

Version

0.84.0

Testcase

https://codesandbox.io/s/mjnyx49vj9

The input field should probably fill the whole width of the dropdown or you should be able to click anywhere in the width to regain focus on the input field.

Say your dropdown looks like this:

now if you click anywhere right of the small input field, you will lose focus off the input and won't be able to type. This situation is very easy to get with such fluid dropdowns. If you know about this issue, you know to simply click within the input field again, but everyone else will not understand this.

This issue is not really present in the non-react version. There the input field is still small, but you can click along the entire width to regain focus to type.

[levithomason]

Confirmed bug, however, the size of the input.search element is a bit of a red herring. The input receives focus on click of the Dropdown. The second click needs to retain focus on the input.

The size of the search input is only supposed to contain the width of the search query. This way, the Dropdown wraps when the search query is long. Here's an updated example that reveals the input:

https://codesandbox.io/s/r06l927ppp

Fix

Again, seems we need to retain focus on the input if the Dropdown root element receives a click.