React-select: Cannot select menu items on mobile

[vitaminwater]

I got on a bug preventing me from selecting any menu items on mobile only.
Turns out, selecting an item would trigger handleInputFocus with Select-input as target.

Removing the call to renderInput for non-searchable select fixed it.

[Moeface]

Also having this same issue, though only on iOS devices - both Chrome and Safari. Works fine on Android phones.

[adamthewan]

Same bug here. Have to hold the item on mobile for it to work, pretty annoying!

[adamthewan]

@vitaminwater Can you explain what you did when you said

Removing the call to renderInput for non-searchable select fixed it.

[vitaminwater]

@adamwan92 I got it to work by changing something in there code, did not make a pull request because of lack of time, and because I don't really know if I'm not breaking anything else.

Maybe @JedWatson got what I was talking about ? Interested in a PR for this ?

[adamthewan]

@vitaminwater A PR or even a copy paste of the code that you changed would help very much!

It's weird cause running the demo (jedwatson.github.io/react-select) works very well on mobile.

[vitaminwater]

@adamwan92 ok thats' really dirty for now: in node_modules/react-select/lib/Select.js, line 938, replace this.renderInput(valueArray) with this.props.searchable ? this.renderInput(valueArray) : null,.

But honestly I can't really encourage you to do this, the change will be lost as soon as you update the package.

[adamthewan]

@vitaminwater thanks so much for the help!
It turned out to be a Fastclick issue, I had two installed at once (Meteor & React Fastclick) which somehow cancelled each other out.

[peterkuiper]

Same problem here, is there a PR already? If not I can create one. Not sure if the fix by @vitaminwater is good enough

[NekR]

I don't know, but I cannot select even on desktop right now (Chrome/macOS)

[idanwe]

Fast click has a disable hook, add needsclick class to option element https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick

[mpigsley]

Any update on this? @peterkuiper did you get a PR ready?

[peterkuiper]

@mpigsley Well, at the time we decided to go with a different solution and currently we have rolled on our solution for it. Looking at the open issues and the open PRs, I assume the author is having quite a big backlog. So sorry, no, I did not get a PR ready.

[JedWatson]

I'm pretty confident this has been addressed in the latest version, if anyone can still reproduce it please let me know with steps explaining how. Thanks!

[alexeykozlov07]

react select is still not work on iPhone. I use latest version of react-select

[Shadowman4205]

@JedWatson
Hello, i tried toggle device with chrome dev tool,
and cannot select option

[Under-Warz]

@alexeykozlov07 / @JedWatson add optionClassName="needsclick" worked for me (thx @idanwe )

[mlukjanska]

For me in react-select v.2.4.0 it works, the issue might have been a conflict due to having react-select-simplevalue included as well.

[CharlieBreval]

Make sure not to use a button in your option Component if you want the handleChange to be triggered when selecting an option.
(I'm using v2.4.0)

[florentdestremau]

Using Firefox 67.0.4, with iPhone 6/7/8 Plus simulator, I can't use the examples on https://react-select.com/home with the mouse. Whenever I hover the dropdown elements the menu closes

[mitayou]

@ alexeykozlov07 / @JedWatson添加optionClassName="needsclick"对我有用（thx @idanwe）

what can i do?, it seems don't support optionClassName property

[leonardobork]

@MrYou0 @florentdestremau same as you guys

[georgiosgiatsidis]

It seems like optionClassName is not a supported property. I overrided Option component instead.

import ReactSelect, { components } from 'react-select';

const CustomOption = props => <components.Option className="needsclick" {...props} />;

<ReactSelect components={{ Option: CustomOption }} />