React-select: prevent keyboard from opening automaticaly

[LiranBri]

Hello,
when the user press the component when filter is enabled, two things happens:

1. options are rendered so he can choose from
2. keyboard is opened so he can type to filter

is it possible to disable #2, so it will happen only when user clicks again?
if not, is it possible to auto hide the keyboard when he starts scrolling through the options?

on small mobile devices, the keyboard hides the options and user must manually close the keyboard (on iphone i think its not even possible)

[crobinson42]

@JedWatson @LiranBri I'm in the same boat - I have posted a stackoverflow question here to accomplish this: https://stackoverflow.com/questions/57733799/react-select-dont-focus-input-when-opening-options-list

[andrewringler]

Here is a screenshot of what this currently looks like on IOS 13.1.2, Safari iPhone SE, with a react-select inside a modal dialog about 1/3 of the way down the page.

As @LiranBri said there is actually no way to hide the IOS keyboard without disabling the control, so we are limited to just seeing however many options fit above the IOS keyboard.

I am not sure what a reasonable solution is? On non touch devices react-select lets you click into the control on the blinking cursor to enter typing mode, it looks like on touch devices react-select enters typing mode immediately on control focus? Perhaps we should have a keyboard icon or something inside the control to enter typing mode instead on touch devices?

[Vadorequest]

I'm encountering the same issue, and I'd love an option to avoid the keyboard to open automatically when focusing the input as well. (option 2)

It's a blocker for my app, because I rely on onMenuClose event to sync the selected choices (they're not sync on onChange event), and it's broken on mobile because the onMenuClose event isn't triggered even though the menu is visually closed once selecting a choice in the menu. (it's another issue, but if the menu would have been closable by default it could have been a workaround for me)

[seba9999]

I'm facing this too ... :'(

IMO it should trigger the list when users click the arrow and open the list PLUS focusing the input ( and btw open the keyboard ) if the user click the input part of the react-select :)

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this issue on the fork and/or submit a PR to resolve this issue on the fork and we can get it merged and released.

EDIT: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[ebonow]

Greetings @LiranBri @seba9999 @Vadorequest @crobinson @andrewringler,

I may have actually inadvertently solved this with my response to this issue: https://github.com/JedWatson/react-select/issues/4279#issuecomment-739743520

It seems that a user had this very same idea and was trying to remove the DummyInput and understand how to render the menu without it. I think the response was fairly elaborate if you are curious about the how it all works.

Long story short, as long you can render a control with at least one-focusable item, open the menu, and give focus to that item, the react-select menu will operate as expected

Here is a working demo with one button giving itself focus and enabling the menu arrow commands.

I will close this issue for now given the age of this, but I can re-open it if there are problems/concerns/questions.

[crobinson42]

@ebonow I wouldn't say this issue is closed. I would vote that this functionality be added as some sort of prop to the component, ie: inputFocusOnClick={false}

[ebonow]

@crobinson42 I think you make a good point, though I don't believe we would want to add another prop as much as we'd want to replace the DummyInput to entirely avoid this situation for mobile users when isSearchable is false.

I'll add this as a discussion point with the team and reopen this issue.

[ebonow]

Greetings everyone,

I am unable to reproduce this issue as long as the prop isSearchable is set to false. Testing on the homepage of react-select allows the user to toggle Searchable.

When Searchable is true, I see the keyboard as expected.

When Searchable is unchecked, I do not see a keyboard as expected.

If anyone can create a reproducible demo of this behavior, we would gladly reopen this ticket, but as it stands this does not appear to be still an issue.