Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot get onClick event to fire on a draggable element in latest ios safari #1367

Closed
jimmybillings opened this issue Jun 19, 2019 · 28 comments
Closed

Cannot get onClick event to fire on a draggable element in latest ios safari #1367

jimmybillings opened this issue Jun 19, 2019 · 28 comments
Labels
investigating 🕵️‍♂️

Comments

@jimmybillings
Copy link

jimmybillings commented Jun 19, 2019 •
edited
Loading

Expected behavior

I should be able to add an onClick handle to a draggable element and see it fire when I click on the draggable element without dragging it.

Actual behavior

Almost never fires the click event. If I keep persisting it will.

Steps to reproduce

Visit the example for a simple list on an ios device using safari - https://react-beautiful-dnd.netlify.com/iframe.html?id=single-vertical-list--basic

On a desktop if you click one of the items it will link you to another url, but on a ios mobile using safari if you touch one of the items it doesn't go anywhere. I haven't confirmed this is only with IOS and safari and not all mobile. I'm also wondering if there is any correlation with this and the following issue which I'm also experiencing: #1314
@alexreardon
Copy link
Collaborator

Is this an issue?

@jimmybillings
Copy link
Author

jimmybillings commented Jun 19, 2019 •
edited
Loading

Potentially, I'm not sure how it's intended as I didn't find a ton of documentation on using onClick with dnd on a mobile device.

I moved to onTouchEnd with some prevent default logic to make it work on mobile but using onClick never seemed to work. However now I have the problem that when I scroll the screen the onTouchEnd event fires so this doesn't really work for me. I'm not so familiar with touch events so I might be missing something but my thought is if onClick worked then firing on scroll wouldn't happen.

I can reopen once I get your feedback. Thank you.

@alexreardon
Copy link
Collaborator

My expectation is that clicking should be unaffected by rbd. Let me know how you go

@jimmybillings
Copy link
Author

Ok. After more testing onClick is definitely not working on ios with all browsers, at least in my case. Seems to work fine on android. I will put together a code sample on stackblitz to reproduce shortly. Thanks.

@alexreardon
Copy link
Collaborator

alexreardon commented Jun 20, 2019 via email

@jimmybillings
Copy link
Author

Ok I have a code example. I have copied the simple list example and added an onClick handle to the element inside of Draggable that creates a browser alert. Works fine in the desktop browser but not in ios. Of course you will need to look at this from an iphone/ipad to view the potential bug.

App url here: https://react-ub51sd.stackblitz.io
Editor Url here: https://stackblitz.com/edit/react-ub51sd

@alexreardon
Copy link
Collaborator

Before I dig into it more, can you please try using react-beautiful-dnd@12.0.0-alpha.4 and see if that fixes the issue?

@jimmybillings
Copy link
Author

I gave it a go but no luck unfortunately, same deal.

@alexreardon
Copy link
Collaborator

Did this only just start happening in the latest ios safari?

@alexreardon
Copy link
Collaborator

(it is okay if you are not sure)

@jimmybillings
Copy link
Author

This is happening on Chrome, Firefox & Safari on IOS. Android seems to be fine across the board. I have an iphone 7 with the latest safari, chrome & firefox and happens on all. I also have an older iPad and I'm seeing the same thing there. I have several other QA members that have experienced the same (working on Android, not working on ios) both with our production code and the simpler code example I sent you just to be sure.

@alexreardon
Copy link
Collaborator

I am testing on latest safari and onClick={() => alert('click')} is working fine on a Draggable...

@alexreardon alexreardon reopened this Jun 25, 2019
@alexreardon
Copy link
Collaborator

On a desktop if you click one of the items it will link you to another url, but on a ios mobile using safari if you touch one of the items it doesn't go anywhere.

It is working fine on my iphone .. 😕

@jimmybillings
Copy link
Author

jimmybillings commented Jun 25, 2019 •
edited
Loading

So just to be clear when you visit this url on your iPhone and tap on an item you get an alert?

https://react-ub51sd.stackblitz.io/

If so I’m going to do more testing then with different iPhone versions because that’s definitely not what I’m seeing.

@jimmybillings
Copy link
Author

I’m testing that url above on multiple iPhone versions and still don’t get an alert on click. I’m not really sure how to proceed here but clearly something is off. I can create a video of this just to prove it but it’s not going to help anything I imagine. Thanks!

@alexreardon
Copy link
Collaborator

Maybe there is something going on with the stackblitz platform?

Given that onClick={() => alert('click')} is working... 🤔

@dovydaskukalis
Copy link

dovydaskukalis commented Jul 5, 2019 •
edited
Loading

Our "solution" was to downgrade to 10.1.1 which is the latest version that works... All the later versions including 12 alphas are not working. All touch/click events seems to be swallowed when you touch draggable element. Even the official examples like https://react-beautiful-dnd.netlify.com/iframe.html?id=single-vertical-list--basic and https://react-beautiful-dnd.netlify.com/iframe.html?id=board--simple are not working for me. Running Safari on iOS 12.3.1 on iPhone X however we got many reports from users using different models/versions.

@jimmybillings
Copy link
Author

Good to know @dovydaskukalis thank you.

@alexreardon
Copy link
Collaborator

It is interesting that 11.x is not working too 🤔

@alexreardon
Copy link
Collaborator

alexreardon commented Jul 8, 2019 •
edited
Loading

"All touch/click events seems to be swallowed when you touch draggable element"

That is worrying if correct

@alexreardon
Copy link
Collaborator

alexreardon commented Jul 9, 2019 •
edited
Loading

Can you please change Draggable > shouldRespectForcePress to true and see if that fixes your issue?

@dovydaskukalis
Copy link

Unfortunately it didn't fix it, I tried on 11.0.4 and nothing changed, except now force touch works with it's default action of opening a preview popup.

@gavrichards
Copy link

"All touch/click events seems to be swallowed when you touch draggable element"

This aligns with the issue I have reported regarding scrolling the container of draggable items:
#1396

@jimmybillings
Copy link
Author

I'm also experiencing #1396, hopefully the fix well get both bugs resolved then. Thanks for the input.

@alexreardon
Copy link
Collaborator

https://bugs.webkit.org/show_bug.cgi?id=199658

@alexreardon alexreardon mentioned this issue Jul 11, 2019
Closed
4 tasks
@alexreardon
Copy link
Collaborator

I have shipped the workaround in an alpha for validation:

12.0.0-alpha.7

Please try it out and let me know how it goes

@jimmybillings
Copy link
Author

So far this has fixed all the problems for me. The screen is now scrolling correctly on a mobile and click is working as expected. Thank you for your hard work, this is a great product!

@alexreardon alexreardon mentioned this issue Jul 22, 2019
Merged
@alexreardon
Copy link
Collaborator

Fixed by #1407. Will also ship in 12.0 #1317

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
investigating 🕵️‍♂️
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gavrichards @jimmybillings @alexreardon @dovydaskukalis