When I click the toggle button with an input focused the menu close and open instantly after, on IOS Safari and IOS Chrome

[darkouz]

• downshift version: 6.1.1
• node version: 14.15.0
• yarn version:1.22.10

Relevant code or config

https://codesandbox.io/s/useselect-input-bug-m40rl?file=/index.js (but weirdly the bug wont reproduce here on IOS browser)

What happened:

https://gyazo.com/6272d41e6b4c94f611dd159d19ee89cb

Problem description:

When i open the select dropdown I focus the input, when i click again on the toggle button, the menu stay open. After a few hours of debuting, I noticed that the onBlur of the keyboard close the menu, but when I click on the button the toggleMenu is invoked therefor open the menu right after the blur. So the behaviour is broken.

Suggested solution:

The only fix i found was to extract onBlur from getInputProps.

[silviuaavram]

First things first. What's the input element for?

And worth mentioning: downshift's useSelect and useCombobox are built to allow users to create accessible components as described by the ARIA spec. In this case, Select and Combobox. Your widget is something custom, it's none of those things. This causes confusion for everyone, especially for users relying on screen readers. They will have no idea how to operate it.

Either use a normal select and useSelect, since you can also highlight by characters (and don't need an input) or if you need an input to display items based on the user input, then use a normal combobox and useCombobox. Both of there uses are described in their own Readme files and on downshift-js.com