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

Author: trueadm

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
 ){
-constprops=nextElement.props;
-constbottom=props.bottom||0;
-constleft=props.left||0;
-constright=props.right||0;
-consttop=props.top||0;
-
-if(bottom===0&&left===0&&right===0&&top===0){
-return '';
-}
-lettopString=top ? `-${top}px` : '0px';
-letleftString=left ? `-${left}px` : '0px';
-letrightString=right ? `-${right}px` : '0x';
-letbottomString=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 '';
 }
 constnextChildren=toArray(
 ((nextChild: any): ReactElement).props.children,

packages/react-events/src/__tests__/TouchHitTarget-test.internal.js

@@ -507,39 +507,6 @@ describe('TouchHitTarget', () => {
 );
 });
 
-it('should hydrate TouchHitTarget hit slop elements correcty',()=>{
-constTest=()=>(
-<EventComponent>
-<div>
-<TouchHitTarget/>
-</div>
-</EventComponent>
-);
-
-constcontainer=document.createElement('div');
-container.innerHTML='<div></div>';
-ReactDOM.hydrate(<Test/>,container);
-expect(Scheduler).toFlushWithoutYielding();
-expect(container.innerHTML).toBe('<div></div>');
-
-constTest2=()=>(
-<EventComponent>
-<div>
-<TouchHitTargettop={10}left={10}right={10}bottom={10}/>
-</div>
-</EventComponent>
-);
-
-constcontainer2=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',()=>{
 constTest=()=>(
 <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',()=>{
 constTest=()=>(
 <EventComponent>
 <div>
@@ -596,9 +563,7 @@ describe('TouchHitTarget', () => {
 );
 
 letoutput=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>');
 
 constTest2=()=>(
 <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>');
 
 constTest3=()=>(
 <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>');
 });
 });
 });