Check the parent fiber in appendChildToContainer

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

packages/react-art/src/ReactARTHostConfig.js

@@ -356,7 +356,7 @@ export function appendChild(parentInstance, child) {
   child.inject(parentInstance);
 }
 
-export function appendChildToContainer(parentInstance, child) {
+export function appendChildToContainer(parentInstance, child, containerIsRoot) {
   if (child.parentNode === parentInstance) {
     child.eject();
   }

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

@@ -2688,7 +2688,21 @@ describe('ReactDOMComponent', () => {
       expect(typeof portalContainer.onclick).toBe('function');
     });
 
-    it('does not add onclick handler to the React root', () => {
+    it('does not add onclick handler to a React root', () => {
+      const container = document.createElement('div');
+
+      function Component() {
+        return <div onClick={() => {}} />;
+      }
+
+      const root = ReactDOM.unstable_createRoot(container);
+      root.render(<Component />);
+      jest.runAllTimers();
+
+      expect(typeof container.onclick).not.toBe('function');
+    });
+
+    it('does not add onclick handler to a legacy React root', () => {
       const container = document.createElement('div');
 
       function Component() {

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

@@ -361,6 +361,7 @@ export function appendChild(
 export function appendChildToContainer(
   container: DOMContainer,
   child: Instance | TextInstance,
+  containerIsRoot: boolean,
 ): void {
   let parentNode;
   if (container.nodeType === COMMENT_NODE) {
@@ -378,11 +379,7 @@ export function appendChildToContainer(
   // This is why we ensure that non React root containers have inline onclick
   // defined.
   // https://github.com/facebook/react/issues/11918
-  const reactRootContainer = container._reactRootContainer;
-  if (
-    (reactRootContainer === null || reactRootContainer === undefined) &&
-    parentNode.onclick === null
-  ) {
+  if (!containerIsRoot && parentNode.onclick === null) {
     // TODO: This cast may not be sound for SVG, MathML or custom elements.
     trapClickOnNonInteractiveElement(((parentNode: any): HTMLElement));
   }

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -301,6 +301,7 @@ export function appendChild(
 export function appendChildToContainer(
   parentInstance: Container,
   child: Instance | TextInstance,
+  containerIsRoot: boolean,
 ): void {
   const childTag = typeof child === 'number' ? child : child._nativeTag;
   UIManager.setChildren(

packages/react-noop-renderer/src/createReactNoop.js

@@ -66,6 +66,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   function appendChildToContainer(
     parentInstance: Container,
     child: Instance | TextInstance,
+    containerIsRoot: boolean,
   ): void {
     if (typeof parentInstance.rootID !== 'string') {
       // Some calls to this aren't typesafe.

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -951,7 +951,8 @@ function commitPlacement(finishedWork: Fiber): void {
         }
       } else {
         if (isContainer) {
-          appendChildToContainer(parent, node.stateNode);
+          const containerIsRoot = parentFiber.tag === HostRoot;
+          appendChildToContainer(parent, node.stateNode, containerIsRoot);
         } else {
           appendChild(parent, node.stateNode);
         }