React-select on safari mobile does not work

Hi guys, I forked the project and made a branch to illustrate this problem.

https://github.com/martinratinaud/react-starter-kit/tree/fix/react-select

Launch npm start and go to http://localhost:3000 from a mobile (not the chrome simulator but a real device or the iOS Simulator)

When you try to select Two, nothing happens even though it works well on a desktop browser.

In the meantime, the official page of react-select deos work on safari mobile http://jedwatson.github.io/react-select/

I tested by disabling SSR but it does not work either.

I think the problem comes from the webpack config but I could not figure this out.

If somebody could help me on this, that would be awesome.

PS: I experienced the same with react-dropzone but hopefully fixing this will fix it too

[phpeek]

@martinratinaud What happens if You use port 3001 instead of 3000 ?

BrowseSync is working for You only if You use port 3001. JS assets are not being loaded on port 3000 (due to BrowserSync proxying) unless You build app for release - npm run build -- --release and start server - node build/server.js.

Also it appears that react-select is setting element’s id attributes automatically which is why I can see this error when running code from Your repo:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) r" id="react-select-2--value" data-react
 (server) r" id="react-select-7--value" data-react

This is not well suited for isomorphic apps. react-select should pick up its own code rendered on server rather than generate new ids again on client.

[martinratinaud]

Thanks a lot @Jaikant it works well if I replace fastclick with react-fastclick. I submitted a PR for this: https://github.com/kriasoft/react-starter-kit/pull/1198.

Cheers