Webform Dialog Modal triggered with a link doesn't work on iOS Safari

Sorry, but I have to disagree this was a good idea. Touch events are special, yes, but at least it should at least have been touchend instead of touchstart.
Using touchend ensures the event fires when the user lifts their finger, reducing accidental triggers.

Still, I think it should not be needed at all in modern browsers, according to this answer: https://stackoverflow.com/a/11398089/10031165

Should we reopen this or create a follow-up?

Which browser and device did you use @roromedia?

Maybe @roromedia could provide the affected browser? If I remind corretly, this where a Safari bug, not sure if click is still problematic in iOS Safari.

Thanks @roromedia.

So I changed the task title accordingly.

Just came across this problematic behaviour again on Android. Extremely annoying when simple scrolling triggers the webform dialog.

We should try if a simple cursor: pointer; solves the problem with the click event on Safari, see:
https://stackoverflow.com/questions/24077725/mobile-safari-sometimes-doe...

EDIT: Or use the new 'pointerup' event instead.

I've tested with 'pointerup' instead 'click touchstart' and it seems to work well on all devices and browsers.

But someone should try this on a real Iphone, I only have the simulator.

So should we re-open this issue or create a new one?

@jrockowitz could you reopen this one to fix it? Or would you prefer a follow-up?

@thomas.frobieter On an Iphone SE2 18.3.2, Safari:

• 'pointerup' does not trigger the modal but opens the link
• 'touchend click' does open the modal when the finger is lifted, which does not really improve the situation much

I'll attach a patch that reverts this issues patch, because we rather use a link for some safari users, instead of interfering with everybody's scrolling.

edit: @roromedia So your issue is only with ipads? Because I can't reproduce it on my iphone. It would be good then to get more info on how widespread the faulty behavior is, so we don't repair something for a few, but introduce regressions for a lot.

@thomas.frobieter On an Iphone SE2 18.3.2, Safari:

'pointerup' does not trigger the modal but opens the link
'touchend click' does open the modal when the finger is lifted, which does not really improve the situation much

That's strange. Safari 13.1/13.2 should support pointerup. I think we should debug this, as the pointer event sounds like the cleanest solution to me.

Here is a Pen to test the events: https://codepen.io/thomas-frobieter/pen/qEdNoEr

I can confirm that the link opens after the pointerup event is fired. For reasons, preventDefault() is not working. I will do further research on this.

EDIT: Okay, when using 'pointerup' you also need to register 'click' and add preventDefault() for both.

Can someone with an Apple touch device please test the 'pointerup click' button? => https://codepen.io/thomas-frobieter/full/qEdNoEr

I have tried on the iOS Simulator and it seems to work well.

If the real device test also works well, I will create a follow up issue.

This has caused #3506020: When scrolling, the modal window opens automatically. Please review the fix in that issue.

@liam morland: There's nothing to review yet. We should either fix both issues over at #3506020: When scrolling, the modal window opens automatically or here. They are very closely related, nearly the same and surely have the same fix. As this one is closed, maybe better move over?

So ==> Further work here: https://www.drupal.org/project/webform/issues/3506020 <==

Yes, please work in the other issue. There isn't a patch, but there is a prose description of the change in comment 4.