React-select: Cannot Select an option on iOS Safari, Chrome Android Nexus 6P can't scroll

[abhiaiyer91]

Hey there, I am having trouble with touch devices trying to select an option in our Select dropdown. The onChange method does not get called at all? Is there something I'm missing? And for android we cannot scroll.

   <Select
              value={this.state.selectValue}
              options={selectOptions}
              clearable={false}
              onChange={this.setSelectValue}
            />

I'm running 1.0.0beta12

[abhiaiyer91]

Alright an update for iOS, if you hold down the option then it selects, but quick taps close the dropdown completely.

[abhiaiyer91]

Upon further investigation, it does not work on iphone 6 but does work on iPhone 6S

[gor181]

@abhiaiyer91 where are you testing this? The issue is present when you are using Chrome device emulator but works just fine on real devices.

[abhiaiyer91]

I am testing this on real devices. iOS and real device Nexus 6. My package.json does say its on beta12, but i wonder if browserify has cached beta8, and Im not getting the recent touch updateS?

[andresfcamacho]

I'm seeing the same thing. If you touch and hold until it highlights then it works, obviously not really workable.

[andresfcamacho]

For what its worth it seems like if you change handleTouchStart in Option.js to call handleMouseDown, it seems to work:

    handleTouchStart: function handleTouchStart(event) {
        // Set a flag that the view is not being dragged
        this.dragging = false;

        this.handleMouseDown(event);
    },

This doesn't seem like the real fix though. There could be something cancelling the touch event preventing handleTouchEnd from being called.

[andresfcamacho]

My suggested fix is a no go because it doesn't allow scrolling.

[andresfcamacho]

I was able to figure out why this didn't work in our environment. We're in vanilla Rails app that is in the process of migrating most views over to React. Previously we had included in our vendor directory the fastclick js file. After removing it I then installed the react-fastclick via npm and now everything works as expected. It could be we had an older version of fastclick, not sure.

In the end this combination worked for us:

    "react-select": "^1.0.0-beta12",
    "react-fastclick": "^2.1.0",

@abhiaiyer91 you may want to check if you have the latest react-fastclick installed.

[dahjelle]

We just ran into this issue as well, and as with @andresfcamacho, it was fixed by using react-fastclick instead of fastclick. Thanks much!

[charlesbodman]

@Can confirm this is an issue on iOS (Simulator and real devices) .
Works fine chrome device emulation tho.
"react-select": "~1.0.0-beta13",

[rahulinaction]

Well any headups to solve this with fastclick itself rather than react-fastclick.The addition of react-fastclick results in other issues which fast click solves.

[adamthewan]

Anyone else got this working with React-fastclick? I installed it via npm and imported in into my js files. Have found no changes yet.

Edit: I've fixed the problem somehow. I removed Meteor's FastClick and somehow it all works now. Very strange.

[bsthomsen]

@andresfcamacho thanks for posting, you saved me for many hours of debugging :) switched fastclick with react-fastclick!

[aertmann]

Here's a workaround for the problem that let's you keep Fastclick:

optionRenderer={option => <div className="needsclick">{option.label}</div>}

pretty annoying conflict :/

[Jaikant]

react-fastclick solved the problem for me too.

[AnthonyDunk]

The solution that worked for me on Android was adding the class "needsclick" to the select control.

[akhilaudable]

We don't use React-fastclick still there is a problem. Even if you open the demo of react-select with touch devices (especially in Safari) you will see the issue.

[chris-guidry]

@aertmann's option works well for v1. For v2 I had to switch to the prop formatOptionLabel:
formatOptionLabel={option => <div className="needsclick">{option.label}</div>}

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!