Remove TouchHitTarget SSR logic to prevent issues with mouse events (#…

…15381)
facebook · Apr 11, 2019 · a9eff32 · a9eff32
1 parent c984100
commit a9eff32
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 61 deletions.
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1173,24 +1173,15 @@ class ReactDOMServerRenderer {
                 elementType.$$typeof === REACT_EVENT_TARGET_TYPE &&
                 elementType.type === REACT_EVENT_TARGET_TOUCH_HIT
               ) {
-                const props = nextElement.props;
-                const bottom = props.bottom || 0;
-                const left = props.left || 0;
-                const right = props.right || 0;
-                const top = props.top || 0;
-
-                if (bottom === 0 && left === 0 && right === 0 && top === 0) {
-                  return '';
-                }
-                let topString = top ? `-${top}px` : '0px';
-                let leftString = left ? `-${left}px` : '0px';
-                let rightString = right ? `-${right}px` : '0x';
-                let bottomString = bottom ? `-${bottom}px` : '0px';
-
-                return (
-                  `<div style="position:absolute;z-index:-1;bottom:` +
-                  `${bottomString};left:${leftString};right:${rightString};top:${topString}"></div>`
-                );
+                // We do not render a hit slop element anymore. Instead we rely
+                // on hydration adding in the hit slop element. The previous
+                // logic had a bug where rendering a hit slop at SSR meant that
+                // mouse events incorrectly registered events on the hit slop
+                // even though it designed to be used for touch events only.
+                // The logic that filters out mouse events from the hit slop
+                // is handled in event responder modules, which only get
+                // initialized upon hydration.
+                return '';
               }
               const nextChildren = toArray(
                 ((nextChild: any): ReactElement).props.children,

diff --git a/packages/react-events/src/__tests__/TouchHitTarget-test.internal.js b/packages/react-events/src/__tests__/TouchHitTarget-test.internal.js
@@ -507,39 +507,6 @@ describe('TouchHitTarget', () => {
       );
     });
 
-    it('should hydrate TouchHitTarget hit slop elements correcty', () => {
-      const Test = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget />
-          </div>
-        </EventComponent>
-      );
-
-      const container = document.createElement('div');
-      container.innerHTML = '<div></div>';
-      ReactDOM.hydrate(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div></div>');
-
-      const Test2 = () => (
-        <EventComponent>
-          <div>
-            <TouchHitTarget top={10} left={10} right={10} bottom={10} />
-          </div>
-        </EventComponent>
-      );
-
-      const container2 = document.createElement('div');
-      container2.innerHTML =
-        '<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>';
-      ReactDOM.hydrate(<Test2 />, container2);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container2.innerHTML).toBe(
-        '<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
-      );
-    });
-
     it('should hydrate TouchHitTarget hit slop elements correcty and patch them', () => {
       const Test = () => (
         <EventComponent>
@@ -586,7 +553,7 @@ describe('TouchHitTarget', () => {
       expect(output).toBe('<div></div>');
     });
 
-    it('should render a TouchHitTarget with hit slop values', () => {
+    it('should render a TouchHitTarget without hit slop values', () => {
       const Test = () => (
         <EventComponent>
           <div>
@@ -596,9 +563,7 @@ describe('TouchHitTarget', () => {
       );
 
       let output = ReactDOMServer.renderToString(<Test />);
-      expect(output).toBe(
-        '<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
-      );
+      expect(output).toBe('<div></div>');
 
       const Test2 = () => (
         <EventComponent>
@@ -609,9 +574,7 @@ describe('TouchHitTarget', () => {
       );
 
       output = ReactDOMServer.renderToString(<Test2 />);
-      expect(output).toBe(
-        '<div><div style="position:absolute;z-index:-1;bottom:-10px;left:0px;right:0x;top:0px"></div></div>',
-      );
+      expect(output).toBe('<div></div>');
 
       const Test3 = () => (
         <EventComponent>
@@ -622,9 +585,7 @@ describe('TouchHitTarget', () => {
       );
 
       output = ReactDOMServer.renderToString(<Test3 />);
-      expect(output).toBe(
-        '<div><div style="position:absolute;z-index:-1;bottom:-4px;left:-2px;right:-3px;top:-1px"></div></div>',
-      );
+      expect(output).toBe('<div></div>');
     });
   });
 });