iOS Safari "tabbing" doesn't work for non-searchable Selects

[theneva]

iOS Safari displays a nifty little toolbar whenever an input element is focused, which lets you skip directly to the next (or previous) input on the page.

This works as expected for the plain Select:

Working demo

Setting isSearchable={false} has the side effect of making the <input> rendered by <DummyInput> readonly, which removes it from the tab order in iOS Safari:

Broken demo

It's still in the tab order in desktop Safari, though, so… that's a thing that happens.

I tried working around this by avoiding the soft keyboard without the readonly attribute, but I couldn't do it, hence this issue.

[lauterry]

Hi

Have you manage to disabled the virtual keyboard with tab arrow when focusinf the input ?

Best regards

[theneva]

Hi @lauterry! Nope, we haven't been able to remove it. The whole searchable-by-default thing is great for user experience on desktop and pretty bad on mobile, which is why we've turned it off—but then it looks bad in iOS Safari…

We're considering migrating our selects to an alternative (looking at Downshift) to get control over this part of the implementation.

[lauterry]

@theneva Thanks for your input

[ebonow]

Bug confirmed:
Tested this with demo example from react-select.com home page using iPhone Simulator, iOS v12.4:

When select was searchable, I was able to use the "tab" navigation arrow
When select was not searchable, I was not able to focus on the input.

I suspect that this indeed is related to the issue described above.

There is likely a workaround possible by rendering another focusable element within the select and adding an onFocus handler on it to focus on the input using refs.