Phoenix_live_view: phx-click does not work anymore using Mobile Safari on iOS

[behe]

Environment

• Elixir version (elixir -v): 1.8.1
• Phoenix version (mix deps): 1.4.3
• NodeJS version (node -v): v11.11.0
• NPM version (npm -v): 6.9.0
• Operating system: MacOS

Actual behavior

When trying to update live view in an app I've been playing with I noticed that the phx-click event does not trigger in newer versions of live view when using Mobile Safari on iOS. I have tested different version to try to figure out when it broke and it seems to have happend in the js refactoring in commit 4be4e71fa160fc07e1aed3afe4b8db86e3fadc63.

Using Safari on MacOS still works though.

Expected behavior

phx-click triggers event on iOS

[snewcomer]

@behe what is the target element that doesn't work? Have ran across this a few times where on mobile safari (and iOS chrome), a click won't bubble up past the body (which as you pointed out, the listener is at the top level now). To work on mobile safari, the target needs to be a link, form element, have some ancestor with an event listener, or lastly it/some ancestor has a CSS with cursor:pointer.

[behe]

The element is a span, but trying to change it into an a tag instead did not help.

[behe]

I got it working now by changing the span to an a and adding a href="#".

[tobyjr]

phx-click within a table tr, works perfectly for desktop.

i.e.

However it doesn't work at all for ios/mobile.

[wbednarski]

Why this is close? It still doesn't work for other elements than a.

[preston-hf]

Doesn't work on svg elements, works just fine on MacOS Safari and MacOS Chrome.

[jvantuyl]

Same problem with a div.

[pzac]

Or a tags lacking the href attribute, as mentioned above (https://github.com/phoenixframework/phoenix_live_view/issues/168#issuecomment-480564970)

[Hossman333]

Ah yeah, just ran into this. I guess I'll do the a trick for now.

[numair]

For reference for future visitors to this issue, the two best solutions are @alexgaribay's comment on #262 (add an empty onclick"" alongside the phx-click) and @jayjun on #315 -- (add onclick="" to the body tag and cursor-pointer in your css).

@chrismccord it would be great if this issue was re-opened until a more elegant solution was merged, or is this a wontfix? In reading the past discussion, I know there's an aversion to platform-specific fixes, but iOS has huge market share that can't be ignored.

[numair]

@josevalim I appreciate that you've re-opened this. I'm guessing the team has already considered a few options, but I am happy to help look into new solutions if that would be helpful.

[chrismccord]

Since this is an iOS specific issue and has current workaround I don't think there's much for us to handle here. The issue is mobile safari does not bubble events for scenarios that lack the outlined rules above, ie no css cursor pointer, anchor tag without href, etc. So there is no easy fix for us to add here. I consider the css the best option, and failing that, the empty body onclick, both of which have to happen in userland.

[chrismccord]

Also note that this issue mostly only applies to binding clicks to certain "non standard" UI elements like divs. Traditional UI elements like buttons and anchors (with href) bubble properly, so while I understand this can bite folks, it's an inherent issue to any javascript bindings. Short of rewriting the body onclick ourselves I'm not sure what solutions exist for LV to apply.

[numair]

@chrismccord I understand your position here — in that case, it would be helpful if this were mentioned in the docs, as otherwise there will be more people who will assume they’ve written faulty code until resorting to Google searches. It would also be great if there was some assurance that these userland workarounds will continue to work, or that a new workaround will be possible, if this breaks in future versions.

If this is a bug in the iOS implementation of onclick, I am willing to burn one of my Apple Developer support tickets on trying to get their developers to take a look at this and consider patching it in a future version. Let me know if that might be helpful.

[Insert “it’s the new IE” comment here.]

[chrismccord]

@numair since you can easily recreate this in your app, can you remove said workarounds and try this in your app.js?

document.body.addEventListener("click", function(){})

And report back? Thanks!

It would also be great if there was some assurance that these userland workarounds will continue to work

Note that the workarounds here are not at all LiveView specific. This event bubbling applies to all JS applications and the workarounds will continue to work as long as they continue to work on mobile safari, as this isn't something LiveView itself controls or causes.

[numair]

I took out the body onclick="" and cursor-pointer CSS and put that in app.js, right above the csrfToken line, and tested it in iOS 14 Simulator and it worked. Currently waiting for the latest version of my code to update on the server, then we'll see how it goes on a proper device. However, at this point, the JavaScript seems to fix the div phx-click issue!

[numair]

@chrismccord That code works on both simulator and a live device, for a site using the latest version of LiveView and attempting to trigger a phx-click on a div. Perhaps that could go in app.js commented-out?

[jayjun]

@numair I wouldn't bother with burning an Apple Developer support ticket. It’s a widely known issue since forever and I bet someone at Apple feels very strongly that non-clickable elements should not bubble click events. React and others programmatically set an empty click handler as a common workaround.

However despite that and my earlier suggestion, I now prefer the WebKit-compatible, semantically correct way of wrapping non-clickable elements inside a <button type="button"> to make them clickable, as described in this later comment.

[numair]

@jayjun I understand why you like that approach, and I tried it, but found that it was a nightmare to deal with in terms of conflicts with CSS directives etc that were previously in place and worked everywhere else.

[preston-hf]

Really happy to see this work out of the box now!

[numair]

@chrismccord Amazing! Thanks for giving this your attention.