Don’t add onclick listener to React root #13778

philipp-spiess · 2018-10-04T23:38:03Z

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:

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 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.

gaearon

I think this is reasonable

gaearon · 2018-10-04T23:42:43Z

This seems to be caused by our normal sites (and thus their React root) being bigger than the viewport:

So the issue only appears when React root is bigger? Or when it is smaller?

I didn't see this in testing. But I don't remember what I used for testing.

sizebot · 2018-10-04T23:45:30Z

Details of bundled changes.

Comparing: d836010...ea25fe7

scheduler

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
scheduler.development.js	n/a	n/a	0 B	19.17 KB	0 B	5.74 KB	UMD_DEV
scheduler.production.min.js	n/a	n/a	0 B	3.16 KB	0 B	1.53 KB	UMD_PROD

Generated by 🚫 dangerJS

philipp-spiess · 2018-10-04T23:46:31Z

So the issue only appears when React root is bigger? Or when it is smaller?

Only when the React root is smaller than the viewport. In the gif you see the red flashing as long as the text does not cause the viewport to overflow.

This (kinda) explains my strange observations here as well: #12717 (comment)

philipp-spiess · 2018-10-04T23:58:29Z

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

@@ -341,8 +341,16 @@ export function appendChild(
  parentInstance.appendChild(child);
 }

+type DOMContainer =


I can also export this type from ReactDOM if that makes more sense.

Would make more sense than duplicating to me.

acdlite · 2018-10-05T00:38:28Z

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

@@ -360,7 +368,7 @@ export function appendChildToContainer(
  // event exists. So we wouldn't see it and dispatch it.
  // This is why we ensure that containers have inline onclick defined.
  // https://github.com/facebook/react/issues/11918
-  if (parentNode.onclick === null) {
+  if (!container._reactRootContainer && parentNode.onclick === null) {


Compare to null and undefined explicitly, plz

NE-SmallTown · 2018-10-05T03:10:47Z

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

@@ -360,7 +368,7 @@ export function appendChildToContainer(
  // event exists. So we wouldn't see it and dispatch it.
  // This is why we ensure that containers have inline onclick defined.


Should we modify the comments together?

acdlite · 2018-10-05T18:11:01Z

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

  // https://github.com/facebook/react/issues/11918
-  if (!container._reactRootContainer && parentNode.onclick === null) {
+  const {_reactRootContainer} = container;


Another style nit: we don't use destructuring, with some exceptions like module-style objects or function args (component props).

gaearon · 2018-10-09T00:47:15Z

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

+      }
+
+      ReactDOM.render(<Component />, container);
+      expect(typeof portalContainer.onclick === 'function').toBeTruthy();


You can just do expect(typeof ...).toBe('function'). Not that it matters.

gaearon

Feel free to merge

gaearon · 2018-10-09T00:50:41Z

(see nit in #13778 (comment))

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.

@gaearon

Fixes facebook#14535 Alternative to facebook#13778 As @gaearon already noted, we can not rely on a container node having a `_reactRootContainer` to detect a React Root since the `createRoot()` API will not set it. Furthermore, the `createRoot()` API is currently only setting a property on the container in DEV mode. We could: 1. Set a property in prod as well. 2. Pass in more information into the `appendChildToContainer()` config. This PR is an attempt to implement 2. to visualize the outcome. It feels bad to do this though since non of the other renderers need that property and I’m not sure how stable the reconciler API is (i.e if we can just add properties like this). Let me know if you prefer 1. or have another idea. 🙂

@gaearon

Fixes facebook#14535 Alternative to facebook#13778 As @gaearon already noted, we can not rely on a container node having a `_reactRootContainer` to detect a React Root since the `createRoot()` API will not set it. Furthermore, the `createRoot()` API is currently only setting a property on the container in DEV mode. We could: 1. Set a property in prod as well. 2. Pass in more information into the `appendChildToContainer()` config. This PR is an attempt to implement 2. to visualize the outcome. It feels bad to do this though since non of the other renderers need that property and I’m not sure how stable the reconciler API is (i.e if we can just add properties like this). Let me know if you prefer 1. or have another idea. 🙂

@gaearon

Fixes facebook#14535 Related to facebook#13778 Alternative to facebook#14681 As @gaearon already noted, we can not rely on a container node having a `_reactRootContainer` to detect a React Root since the `createRoot()` API will not set it. Furthermore, the `createRoot()` API is currently only setting a property on the container in DEV mode. We could: 1. Set a property in prod as well. 2. Pass in more information into the `appendChildToContainer()` config. This PR is an attempt to implement 1. It feels better than [the other approach](facebook#14681) since we don't need to change the reconciler API.

facebook-github-bot added the CLA Signed label Oct 4, 2018

philipp-spiess force-pushed the ios-tap-highlight branch from c1cba56 to 45578e6 Compare October 4, 2018 23:40

gaearon approved these changes Oct 4, 2018

View reviewed changes

philipp-spiess mentioned this pull request Oct 4, 2018

The gray overlay when tap the react root container #13777

Closed

klamping mentioned this pull request Oct 4, 2018

React PR Test Report Listing klamping/react-webdriverio-tests#1

Open

Make Flow happy by giving it more context

f78da30

philipp-spiess commented Oct 4, 2018

View reviewed changes

It’s time to go to bed

965b17c

acdlite reviewed Oct 5, 2018

View reviewed changes

NE-SmallTown reviewed Oct 5, 2018

View reviewed changes

Check for null and undefined explicitly

f0c2702

acdlite reviewed Oct 5, 2018

View reviewed changes

We don't use destructuring

4cf7175

gaearon reviewed Oct 9, 2018

View reviewed changes

gaearon approved these changes Oct 9, 2018

View reviewed changes

Cleanup DOMContainer usage and test assertions

ea25fe7

philipp-spiess merged commit f47a958 into facebook:master Oct 9, 2018

philipp-spiess deleted the ios-tap-highlight branch October 9, 2018 08:27

gaearon mentioned this pull request Oct 23, 2018

Add 16.6.0 changelog #13927

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

philipp-spiess mentioned this pull request Jan 23, 2019

Detect React roots by checking the parent fiber #14681

Closed

philipp-spiess mentioned this pull request Jan 24, 2019

Detect React roots created by createRoot #14682

Closed

Don’t add onclick listener to React root #13778

Don’t add onclick listener to React root #13778

philipp-spiess commented Oct 4, 2018

gaearon left a comment

gaearon commented Oct 4, 2018

sizebot commented Oct 4, 2018 •

edited

scheduler

philipp-spiess commented Oct 4, 2018 •

edited

philipp-spiess Oct 4, 2018

gaearon Oct 9, 2018

acdlite Oct 5, 2018

NE-SmallTown Oct 5, 2018

acdlite Oct 5, 2018

gaearon Oct 9, 2018

gaearon left a comment

gaearon commented Oct 9, 2018

		@@ -360,7 +368,7 @@ export function appendChildToContainer(
		// event exists. So we wouldn't see it and dispatch it.
		// This is why we ensure that containers have inline onclick defined.

Don’t add onclick listener to React root #13778

Don’t add onclick listener to React root #13778

Conversation

philipp-spiess commented Oct 4, 2018

gaearon left a comment

Choose a reason for hiding this comment

gaearon commented Oct 4, 2018

sizebot commented Oct 4, 2018 • edited

scheduler

philipp-spiess commented Oct 4, 2018 • edited

philipp-spiess Oct 4, 2018

Choose a reason for hiding this comment

gaearon Oct 9, 2018

Choose a reason for hiding this comment

acdlite Oct 5, 2018

Choose a reason for hiding this comment

NE-SmallTown Oct 5, 2018

Choose a reason for hiding this comment

acdlite Oct 5, 2018

Choose a reason for hiding this comment

gaearon Oct 9, 2018

Choose a reason for hiding this comment

gaearon left a comment

Choose a reason for hiding this comment

gaearon commented Oct 9, 2018

sizebot commented Oct 4, 2018 •

edited

philipp-spiess commented Oct 4, 2018 •

edited