React-beautiful-dnd: Cannot get onClick event to fire on a draggable element in latest ios safari
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: https://github.com/atlassian/react-beautiful-dnd/issues/1314
jimmybillings
All 28 comments
Is this an issue?
alexreardon
on 19 Jun 2019
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.
jimmybillings
on 19 Jun 2019
My expectation is that clicking should be unaffected by rbd. Let me know how you go
alexreardon
on 20 Jun 2019
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.
jimmybillings
on 20 Jun 2019
Thanks!
On Thu, Jun 20, 2019 at 2:27 PM James Billings notifications@github.com
wrote:
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.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/1367?email_source=notifications&email_token=AAQU33JWJHVDYC5Z3VPJBY3P3MBMHA5CNFSM4HZF4QGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYD7DIA#issuecomment-503837088,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAQU33P3OVJLM2E6WBBLLXDP3MBMHANCNFSM4HZF4QGA
.
alexreardon
on 20 Jun 2019
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
jimmybillings
on 20 Jun 2019
Before I dig into it more, can you please try using [email protected] and see if that fixes the issue?
alexreardon
on 20 Jun 2019
I gave it a go but no luck unfortunately, same deal.
jimmybillings
on 20 Jun 2019
Did this only just start happening in the latest ios safari?
alexreardon
on 20 Jun 2019
(it is okay if you are not sure)
alexreardon
on 20 Jun 2019
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.
jimmybillings
on 20 Jun 2019
I am testing on latest safari and onClick={() => alert('click')} is working fine on a Draggable...
alexreardon
on 25 Jun 2019
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 .. 😕
alexreardon
on 25 Jun 2019
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
on 25 Jun 2019
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!
jimmybillings
on 30 Jun 2019
Maybe there is something going on with the stackblitz platform?
Given that onClick={() => alert('click')} is working... 🤔
alexreardon
on 1 Jul 2019
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.
dovydaskukalis
on 5 Jul 2019
Good to know @dovydaskukalis thank you.
jimmybillings
on 6 Jul 2019
It is interesting that 11.x is not working too 🤔
alexreardon
on 8 Jul 2019
"All touch/click events seems to be swallowed when you touch draggable element"
That is worrying if correct
alexreardon
on 8 Jul 2019
Can you please change Draggable > shouldRespectForcePress to true and see if that fixes your issue?
alexreardon
on 9 Jul 2019
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.
dovydaskukalis
on 9 Jul 2019
"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:
https://github.com/atlassian/react-beautiful-dnd/issues/1396
gavrichards
on 9 Jul 2019
I'm also experiencing #1396, hopefully the fix well get both bugs resolved then. Thanks for the input.
jimmybillings
on 9 Jul 2019
alexreardon
on 10 Jul 2019
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
alexreardon
on 12 Jul 2019
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!
jimmybillings
on 12 Jul 2019
Fixed by #1407. Will also ship in 12.0 #1317
alexreardon
on 22 Jul 2019
Related issues
heymartinadams
·
3Comments
OmriAharon
·
3Comments
screenmeet
·
3Comments
jasonlewicki
·
3Comments
Tsabary
·
3Comments
Most helpful comment
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!