Trap click events for portal root #11927

aweary · 2017-12-27T23:21:23Z

Should resolve #11918

Still need to run the build in iOS Safari to verify, but I'm 90% sure it will since an empty click handler fixed it in the JSFiddle provided for the issue.

gaearon · 2017-12-28T00:53:22Z

packages/react-dom/src/client/ReactDOM.js

@@ -1125,6 +1126,7 @@ function createPortal(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
+  trapClickOnNonInteractiveElement(((container: any): HTMLElement));


Hmm, not sure we want to introduce side effects there.

Is there another place to perform DOM-specific effects when a portal is mounted?

Something like appendToContainer in the renderer?

If we do it in appendChildToContainer then we'll also be trapping click events on other containers, I guess that's fine?

Hmm maybe? Idk :-(

gaearon

createPortal shouldn't have side effects

aweary · 2018-01-05T22:57:08Z

packages/react-dom/src/client/ReactDOM.js

@@ -760,7 +761,11 @@ const DOMRenderer = ReactFiberReconciler({
    ): void {
      if (container.nodeType === COMMENT_NODE) {
        (container.parentNode: any).insertBefore(child, container);
+        trapClickOnNonInteractiveElement(
+          ((container.parentNode: any): HTMLElement),
+        );


@gaearon is using a comment node as a mount point supported for portals as well?

Worth supporting for consistency I guess

addressed

gaearon · 2018-01-06T00:58:12Z

packages/react-dom/src/client/ReactDOM.js

      } else {
+        trapClickOnNonInteractiveElement(((container: any): HTMLElement));


What if it already has onclick? Is it expected that rendering into it overrides onclick?

I guess if it already has onclick we don't need to trap click events, so I'll wrap this in a null check.

Should we do that in trapClickOnNonInteractiveElement itself then?

Yeah that's what I was doing :) my only hesitation is that trapClickOnNonInteractiveElement is also called on elements that React controls (which shouldn't have onclick making the check redundant in most cases).

Yeah, I guess you're right

By the way do we do this regardless of whether we're mobile safari? Is that good? Should we check the browser somehow?

Right now we do it regardless of the browser. There's an existing TODO for adding browser detection. It might be a good time to address that, assuming browser detection is fast/reliable enough.

nhunzaker · 2018-07-15T01:24:48Z

Hey Brandon! Are there any next steps I can help figure out to move this along? The TODO you referenced for only applying this behavior in Safari also has an issue tracking it (#12989). Should we focus on that first?

gaearon · 2018-08-17T21:27:07Z

I don't understand this fix.

In the existing code we set onclick handlers on the target nodes. That is, on the nodes that would be clicked.

Here, we set onclick on the container node of the portal. Why is this helpful?

aweary · 2018-08-17T21:47:37Z

It's been awhile, but see this JSFiddle from the issue @gaearon. Attaching an event listener to the container allows the event to bubble 🤷‍♂️

gaearon · 2018-08-17T21:48:37Z

We need to have a rational explanation first. 😄

aweary · 2018-08-17T21:54:58Z

Is "because iOS Safari" rational enough? 😅

I'll have to dig into this again to make any sense of it.

gaearon · 2018-08-17T21:56:35Z

Is "because iOS Safari" rational enough

Scare tactics.

gaearon · 2018-08-17T22:07:41Z

It does work though. WHY

gaearon · 2018-08-17T22:27:08Z

#12989 (comment)

gaearon · 2018-08-18T01:10:28Z

Seems fine. I added a comment for why this works.

pull-bot · 2018-08-18T01:15:55Z

ReactDOM: size: 0.0%, gzip: 🔺+0.1%

Details of bundled changes.

Comparing: 0da5102...4893ae2

react-dom

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-dom.development.js	+0.1%	+0.1%	649.27 KB	649.95 KB	152.41 KB	152.57 KB	UMD_DEV
react-dom.production.min.js	0.0%	🔺+0.1%	95.6 KB	95.64 KB	31.24 KB	31.28 KB	UMD_PROD
react-dom.development.js	+0.1%	+0.1%	645.41 KB	646.09 KB	151.28 KB	151.45 KB	NODE_DEV
react-dom.production.min.js	0.0%	🔺+0.1%	95.59 KB	95.64 KB	30.98 KB	31 KB	NODE_PROD
ReactDOM-dev.js	+0.1%	+0.1%	652.7 KB	653.38 KB	149.44 KB	149.63 KB	FB_WWW_DEV
ReactDOM-prod.js	🔺+0.1%	🔺+0.1%	288.52 KB	288.67 KB	53.42 KB	53.45 KB	FB_WWW_PROD
react-dom.profiling.min.js	0.0%	+0.1%	96.79 KB	96.83 KB	31.37 KB	31.4 KB	NODE_PROFILING
ReactDOM-profiling.js	+0.1%	+0.1%	290.87 KB	291.01 KB	54.02 KB	54.05 KB	FB_WWW_PROFILING

Generated by 🚫 dangerJS

Fixes facebook#13777 As part of facebook#11927 we introduced a regression by adding onclick handler to the React root as well. This causes the whole React tree to flash when tapped on iOS devices (for reasons I outlined in facebook#12989 (comment)). To fix this, we should only apply onclick listeners to portal roots. I verified that this fix indeed worked by checkout out our DOM fixtures and added regression tests as well. Strangely, I had to make changes to the DOM fixtures to see the behavior in the first place. This seems to be caused by our normal sites being bigger than the viewport: ![](http://cl.ly/3f18f8b85e91/Screen%20Recording%202018-10-05%20at%2001.32%20AM.gif) An alternative fix would be to add a third parameter to `appendChildToContainer` based on the tag of the parent fiber. Although I think relying on the `_reactRootContainer` property that we set on the element is less intrusive.

Fixes facebook#13777 As part of facebook#11927 we introduced a regression by adding onclick handler to the React root. This causes the whole React tree to flash when tapped on iOS devices (for reasons I outlined in facebook#12989 (comment)). To fix this, we should only apply onclick listeners to portal roots. I verified that this fix indeed worked by checkout out our DOM fixtures and added regression tests as well. Strangely, I had to make changes to the DOM fixtures to see the behavior in the first place. This seems to be caused by our normal sites being bigger than the viewport: ![](http://cl.ly/3f18f8b85e91/Screen%20Recording%202018-10-05%20at%2001.32%20AM.gif) An alternative fix would be to add a third parameter to `appendChildToContainer` based on the tag of the parent fiber. Although I think relying on the `_reactRootContainer` property that we set on the element is less intrusive.

Fixes #13777 As part of #11927 we introduced a regression by adding onclick handler to the React root. This causes the whole React tree to flash when tapped on iOS devices (for reasons I outlined in #12989 (comment)). To fix this, we should only apply onclick listeners to portal roots. I verified that my proposed fix indeed works by checking out our DOM fixtures and adding regression tests. Strangely, I had to make changes to the DOM fixtures to see the behavior in the first place. This seems to be caused by our normal sites (and thus their React root) being bigger than the viewport: ![](http://cl.ly/3f18f8b85e91/Screen%20Recording%202018-10-05%20at%2001.32%20AM.gif) An alternative approach to finding out if we're appending to a React root would be to add a third parameter to `appendChildToContainer` based on the tag of the parent fiber.

Fixes facebook#13777 As part of facebook#11927 we introduced a regression by adding onclick handler to the React root. This causes the whole React tree to flash when tapped on iOS devices (for reasons I outlined in facebook#12989 (comment)). To fix this, we should only apply onclick listeners to portal roots. I verified that my proposed fix indeed works by checking out our DOM fixtures and adding regression tests. Strangely, I had to make changes to the DOM fixtures to see the behavior in the first place. This seems to be caused by our normal sites (and thus their React root) being bigger than the viewport: ![](http://cl.ly/3f18f8b85e91/Screen%20Recording%202018-10-05%20at%2001.32%20AM.gif) An alternative approach to finding out if we're appending to a React root would be to add a third parameter to `appendChildToContainer` based on the tag of the parent fiber.

This event retarget was originally added in order to work around a problem with react event propagation across the shadow root boundary. This appears to be no longer needed. It is currently resulting in double dispatching to the on click handler. While not yet confirmed, it is possible that the underlying issue was fixed with facebook/react#11927 which was released in react-dom v16.5.0.

facebook-github-bot added the CLA Signed label Dec 27, 2017

gaearon reviewed Dec 28, 2017

View reviewed changes

gaearon previously requested changes Jan 5, 2018

View reviewed changes

aweary commented Jan 5, 2018

View reviewed changes

aweary force-pushed the empty-click-portal-container branch from 879cc35 to 7e8a4dc Compare January 5, 2018 23:03

gaearon reviewed Jan 6, 2018

View reviewed changes

phyllisstein mentioned this pull request Jul 14, 2018

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

Closed

Brandon Dail added 2 commits August 17, 2018 21:53

Trap click events for portal root

e9389e0

Trap click event on container in appendChildToContainer

11687a3

gaearon force-pushed the empty-click-portal-container branch from 7e8a4dc to 11687a3 Compare August 17, 2018 20:57

gaearon mentioned this pull request Aug 17, 2018

Consider removing Mobile Safari empty onclick hack #12989

Open

Add a comment

4893ae2

gaearon merged commit b3a4cfe into facebook:master Aug 18, 2018

gaearon mentioned this pull request Sep 5, 2018

Changelog for 16.5.0 #13571

Merged

dependencies bot mentioned this pull request Oct 1, 2018

Update react-dom in /modules/frontend from 16.3.0 to 16.5.2 project-accelerate/accelerate#277

Open

amikitevich mentioned this pull request Oct 4, 2018

The gray overlay when tap the react root container #13777

Closed

philipp-spiess mentioned this pull request Oct 4, 2018

Don’t add onclick listener to React root #13778

Merged

This was referenced Nov 1, 2018

Update react-dom in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#253

Closed

Update react in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#254

Closed

This was referenced Dec 1, 2018

Update react-test-renderer in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#312

Open

Update react in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#313

Open

jasco mentioned this pull request Feb 4, 2020

Events double fired in Root and @keyframes render to string with <Style> as [object Object] treshugart/react-shade#10

Closed

koba04 mentioned this pull request Aug 14, 2020

Bug: click event is attached to createPortal #19611

Open

This was referenced Sep 5, 2024

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#65

Open

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#66

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trap click events for portal root #11927

Trap click events for portal root #11927

aweary commented Dec 27, 2017

gaearon Dec 28, 2017

aweary Dec 28, 2017

gaearon Jan 5, 2018

aweary Jan 5, 2018

gaearon Jan 6, 2018

gaearon left a comment

aweary Jan 5, 2018

gaearon Jan 6, 2018

gaearon Jan 6, 2018

aweary Jan 6, 2018

gaearon Jan 6, 2018 •

edited

Loading

aweary Jan 6, 2018

gaearon Jan 6, 2018

gaearon Jan 6, 2018

aweary Jan 6, 2018

nhunzaker commented Jul 15, 2018

gaearon commented Aug 17, 2018

aweary commented Aug 17, 2018

gaearon commented Aug 17, 2018

aweary commented Aug 17, 2018

gaearon commented Aug 17, 2018

gaearon commented Aug 17, 2018

gaearon commented Aug 17, 2018

gaearon commented Aug 18, 2018

pull-bot commented Aug 18, 2018

react-dom

		} else {
		trapClickOnNonInteractiveElement(((container: any): HTMLElement));

Trap click events for portal root #11927

Trap click events for portal root #11927

Conversation

aweary commented Dec 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon Jan 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nhunzaker commented Jul 15, 2018

gaearon commented Aug 17, 2018

aweary commented Aug 17, 2018

gaearon commented Aug 17, 2018

aweary commented Aug 17, 2018

gaearon commented Aug 17, 2018

gaearon commented Aug 17, 2018

gaearon commented Aug 17, 2018

gaearon commented Aug 18, 2018

pull-bot commented Aug 18, 2018

react-dom

gaearon Jan 6, 2018 •

edited

Loading