Click events don't bubble from Portal content on mobile Safari

[zebulonj]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
In mobile Safari, DOM events originating from elements rendered through a Portal do not bubble (propagate) up the React component tree.

If the current behavior is a bug, please provide the steps to reproduce....
Please see the following JSFiddle: https://jsfiddle.net/zebulonj/wf7orwan/

In this JSFiddle, the expected behavior (seen in a desktop browser) is that clicking on the portal content (appearing as a modal, including backdrop) should toggle to the "On" or "Off" indicator rendered in the main content. However, in mobile Safari (iOS 11.1.1), the click events do not propagate.

What is the expected behavior?
Click events should propagate up the React component tree.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Affected: React 16.2
iOS 11.1.1

[zebulonj]

A clue: the issue can be resolved with a hack—adding a no-op click handler to the containing DOM element:

this.el.onclick = () => null;

See: https://jsfiddle.net/zebulonj/02p6x5kk/

[aweary]

A clue: the issue can be resolved with a hack—adding a no-op click handler to the containing DOM element

We already attach empty listeners to elements with click handlers because of this behavior in iOS Safari. We could do the same for the element passed to ReactDOM.createPortal.

[M-ZubairAhmed]

Hey @aweary would you like to take this and add empty listener to element passed to ReactDOM.createPortal as well?

[phyllisstein]

Just wanted to see if there's been any movement on this or on #11927. The bug persists in mobile Safari up to iOS 12, and this issue has been languishing for a while; it'd be really great to see a resolution.

[nhunzaker]

Thanks for the prod! I'll circle up with Brandon in #11927 and see about next steps.

[gaearon]

Will be out in next release.