search

tajo / react-movable

🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
https://react-movable.pages.dev
MIT License
1.55k stars 51 forks source link

Weird interaction between react-movable and Bootstrap's table-responsive in Safari on iOS #30

Closed dumbmatter closed 4 years ago

dumbmatter commented 4 years ago

Example: https://codesandbox.io/s/basic-react-movable-jm1ld

I can observe the problem in Safari 13 on iOS.

It works fine in every other browser I tried. Even Safari on desktop works!

But with Safari on iOS, what I see there is that the table displays, and reordering the table by dragging the handles works, but scrolling the table to the right does not work.

I haven't looked into the react-movable code at all, but I'm guessing that somehow react-movable is blocking whatever click/drag event that Safari uses for scrolling. Which is a sensible thing for react-movable to do, to implement reordering via dragging. But in this case, since my table uses data-movable-handle to specify only one column of the table as the handle, react-movable shouldn't be interfering at all with click/drag events in other columns.

I previously had a similar table made with react-sortable-hoc that didn't have this problem, so it must be possible for it to work.

tajo commented 4 years ago

I'm guessing that somehow react-movable is blocking whatever click/drag event that Safari uses for scrolling

Yep.

But in this case, since my table uses data-movable-handle to specify only one column of the table as the handle, react-movable shouldn't be interfering at all with click/drag events in other columns.

Yea, we could probably add some condition before canceling events.

dumbmatter commented 4 years ago

onMouseOrTouchStart seems to already be doing that, bailing out if something besides the handle is clicked. And it does work in other browsers, just not Safari on iOS. So it might be a tricky browser compatibility issue.