Warn on nested EventTragets in experimental event API (facebook#15287)

necolas · Apr 1, 2019 · 9444a54
1 parent a050f3d
commit 9444a54
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -190,6 +190,11 @@ export function getChildHostContextForEvent(
     let eventData = null;
 
     if (type === REACT_EVENT_COMPONENT_TYPE) {
+      warning(
+        parentHostContextDev.eventData === null ||
+          !parentHostContextDev.eventData.isEventTarget,
+        'validateDOMNesting: React event targets must not have event components as children.',
+      );
       eventData = {
         isEventComponent: true,
         isEventTarget: false,

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -268,6 +268,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     ) {
       if (__DEV__ && enableEventAPI) {
         if (type === REACT_EVENT_COMPONENT_TYPE) {
+          warning(
+            parentHostContext !== EVENT_TARGET_CONTEXT,
+            'validateDOMNesting: React event targets must not have event components as children.',
+          );
           return EVENT_COMPONENT_CONTEXT;
         } else if (type === REACT_EVENT_TARGET_TYPE) {
           warning(

diff --git a/packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js b/packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js
@@ -200,6 +200,25 @@ describe('ReactFiberEvents', () => {
         'Warning: validateDOMNesting: React event targets must be direct children of event components.',
       );
     });
+
+    it('should warn if an event target has an event component as a child', () => {
+      const Test = () => (
+        <EventComponent>
+          <EventTarget>
+            <EventComponent>
+              <span>Child 1</span>
+            </EventComponent>
+          </EventTarget>
+        </EventComponent>
+      );
+
+      expect(() => {
+        ReactNoop.render(<Test />);
+        expect(Scheduler).toFlushWithoutYielding();
+      }).toWarnDev(
+        'Warning: validateDOMNesting: React event targets must not have event components as children.',
+      );
+    });
   });
 
   describe('TestRenderer', () => {
@@ -368,6 +387,26 @@ describe('ReactFiberEvents', () => {
         'Warning: validateDOMNesting: React event targets must be direct children of event components.',
       );
     });
+
+    it('should warn if an event target has an event component as a child', () => {
+      const Test = () => (
+        <EventComponent>
+          <EventTarget>
+            <EventComponent>
+              <span>Child 1</span>
+            </EventComponent>
+          </EventTarget>
+        </EventComponent>
+      );
+
+      const root = ReactTestRenderer.create(null);
+      expect(() => {
+        root.update(<Test />);
+        expect(Scheduler).toFlushWithoutYielding();
+      }).toWarnDev(
+        'Warning: validateDOMNesting: React event targets must not have event components as children.',
+      );
+    });
   });
 
   describe('ReactDOM', () => {
@@ -535,6 +574,26 @@ describe('ReactFiberEvents', () => {
         'Warning: validateDOMNesting: React event targets must be direct children of event components.',
       );
     });
+
+    it('should warn if an event target has an event component as a child', () => {
+      const Test = () => (
+        <EventComponent>
+          <EventTarget>
+            <EventComponent>
+              <span>Child 1</span>
+            </EventComponent>
+          </EventTarget>
+        </EventComponent>
+      );
+
+      expect(() => {
+        const container = document.createElement('div');
+        ReactDOM.render(<Test />, container);
+        expect(Scheduler).toFlushWithoutYielding();
+      }).toWarnDev(
+        'Warning: validateDOMNesting: React event targets must not have event components as children.',
+      );
+    });
   });
 
   describe('ReactDOMServer', () => {