Trouble getting schedule to work on mobile? about react-schedule-selector HOT 8 CLOSED

Yes! Mobile is working on my end now. Really appreciate it!

from react-schedule-selector.

Hm, which device/browser are you using? It seems to be working for me on my iPhone via Safari.

from react-schedule-selector.

The demo happens to work flawlessly on mobile. For clarification, this issue seems to only occur on newly created projects using the package. I'll add the ScheduleSelector component to my new project, copy the same props/code from the demo, and still face the same problem (unable to click and drag over cells on mobile).

from react-schedule-selector.

Hm, could you share a code example where you run into this issue? Perhaps on something like codepen?

from react-schedule-selector.

Sure thing! I've made a CodeSandbox with the package installed.
https://codesandbox.io/s/hardcore-nobel-jfu7i?file=/src/App.js

from react-schedule-selector.

Thanks for putting that together. I was able to reproduce the issue on my iPhone viewing your CodeSandbox example. However, even after making my own local sample app markup identical to your example, ie.

<div className="App">
  <h1>Hello CodeSandbox</h1>
  <ScheduleSelector
    selection={this.state.schedule}
    numDays={5}
    minTime={8}
    maxTime={22}
    hourlyChunks={2}
    onChange={this.handleDateChange}
  />
</div>

I was still able to successfully select on mobile. This leads me to wonder if it's an issue with the way touch events get propagated through the iframe that CodeSandbox puts the app in.

from react-schedule-selector.

After doing a bit more in-depth debugging, I realized the problem stems from Styled Component's deprecation of innerRef. A short-term solution is, if possible, to use a version of Styled System prior to v4. There's an active PR (#16) that uses the ref property and enables the use of the newest Styled Components. I'll work on getting that merged in and deployed in a new version.

from react-schedule-selector.

Just verified the fix from #29 (published as v2.0.0) makes your CodeSandbox example work with the latest version of Styled Components (v5.2.0).

Let me know if it's all good on your end and I'll close this issue out.

from react-schedule-selector.