React-select: Can't open menu on mobile (Chrome, Firefox and Safari)

[infiman]

Hi there! First of all thanks for react-select and all the work is done!

My issue is - I cannot open select in my project using mobile (Chrome, Firefox on Android and Safari on iOS).

To reproduce the issue it's enough to visit https://react-select.com/ using mobile and try to open any select menu by clicking either dropdown arrows or inputs itself (I have exact the same problem on my project). I'm using Chrome for Android (71.0.3578.99 on Android 9).

The weird part is that https://codesandbox.io/s/k5rvn9z3lv example works. Some of my select implementations work as well but I also do have the same broken selects as on react select home page. One thing I have noticed - it focuses and blurs immediately (you can spot it by :focus styles been applied).

Thanks for any help.

[bartlomiejzuber]

The weird part is that https://codesandbox.io/s/k5rvn9z3lv example works. Some of my select implementations work as well but I also do have the same broken selects as on react select home page. One thing I have noticed - it focuses and blurs immediately (you can spot it by :focus styles been applied).

Maybe there is version mismatch between demo page and codesandbox.io ?

// edit

I've checked it and it looks like there is really version mismatch. 🔍 React-select version used in link @infiman provided to codesandbox.io got pretty old version i.e. 2.0.0-beta.7.

So in mean time you can use some older version to fix that issue.

npm i [email protected] --save

[rajeev1982]

I reverted to this version 2.3.0 (from 2.4.0) and tested on desktop and mobile, works great on both.

[goodpickle]

https://github.com/JedWatson/react-select/pull/3432 fixes this bug. Version 2.4.1 https://github.com/JedWatson/react-select/blob/master/HISTORY.md#v241--2019-02-18

[infiman]

Thank you to everyone for the help, especially to @goodpickle. Seems like it resolves this issue so I'm closing it.

3432 fixes this bug. Version 2.4.1 https://github.com/JedWatson/react-select/blob/master/HISTORY.md#v241--2019-02-18

[alpandi15]

    <Select
      value={
        typeof value === 'string'
          ? options.filter((option) => option.value === value)[0]
          : value
      }
      onChange={onChange}
      onBlur={() => onBlur(value[0])}
    />