Skip to content

Commit a9eff32

Browse files
authored
Remove TouchHitTarget SSR logic to prevent issues with mouse events (#15381)
1 parent c984100 commit a9eff32

File tree

2 files changed

+13
-61
lines changed

2 files changed

+13
-61
lines changed

packages/react-dom/src/server/ReactPartialRenderer.js

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1173,24 +1173,15 @@ class ReactDOMServerRenderer {
11731173
elementType.$$typeof === REACT_EVENT_TARGET_TYPE &&
11741174
elementType.type === REACT_EVENT_TARGET_TOUCH_HIT
11751175
) {
1176-
const props = nextElement.props;
1177-
const bottom = props.bottom || 0;
1178-
const left = props.left || 0;
1179-
const right = props.right || 0;
1180-
const top = props.top || 0;
1181-
1182-
if (bottom === 0 && left === 0 && right === 0 && top === 0) {
1183-
return '';
1184-
}
1185-
let topString = top ? `-${top}px` : '0px';
1186-
let leftString = left ? `-${left}px` : '0px';
1187-
let rightString = right ? `-${right}px` : '0x';
1188-
let bottomString = bottom ? `-${bottom}px` : '0px';
1189-
1190-
return (
1191-
`<div style="position:absolute;z-index:-1;bottom:` +
1192-
`${bottomString};left:${leftString};right:${rightString};top:${topString}"></div>`
1193-
);
1176+
// We do not render a hit slop element anymore. Instead we rely
1177+
// on hydration adding in the hit slop element. The previous
1178+
// logic had a bug where rendering a hit slop at SSR meant that
1179+
// mouse events incorrectly registered events on the hit slop
1180+
// even though it designed to be used for touch events only.
1181+
// The logic that filters out mouse events from the hit slop
1182+
// is handled in event responder modules, which only get
1183+
// initialized upon hydration.
1184+
return '';
11941185
}
11951186
const nextChildren = toArray(
11961187
((nextChild: any): ReactElement).props.children,

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

Lines changed: 4 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -507,39 +507,6 @@ describe('TouchHitTarget', () => {
507507
);
508508
});
509509

510-
it('should hydrate TouchHitTarget hit slop elements correcty', () => {
511-
const Test = () => (
512-
<EventComponent>
513-
<div>
514-
<TouchHitTarget />
515-
</div>
516-
</EventComponent>
517-
);
518-
519-
const container = document.createElement('div');
520-
container.innerHTML = '<div></div>';
521-
ReactDOM.hydrate(<Test />, container);
522-
expect(Scheduler).toFlushWithoutYielding();
523-
expect(container.innerHTML).toBe('<div></div>');
524-
525-
const Test2 = () => (
526-
<EventComponent>
527-
<div>
528-
<TouchHitTarget top={10} left={10} right={10} bottom={10} />
529-
</div>
530-
</EventComponent>
531-
);
532-
533-
const container2 = document.createElement('div');
534-
container2.innerHTML =
535-
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>';
536-
ReactDOM.hydrate(<Test2 />, container2);
537-
expect(Scheduler).toFlushWithoutYielding();
538-
expect(container2.innerHTML).toBe(
539-
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
540-
);
541-
});
542-
543510
it('should hydrate TouchHitTarget hit slop elements correcty and patch them', () => {
544511
const Test = () => (
545512
<EventComponent>
@@ -586,7 +553,7 @@ describe('TouchHitTarget', () => {
586553
expect(output).toBe('<div></div>');
587554
});
588555

589-
it('should render a TouchHitTarget with hit slop values', () => {
556+
it('should render a TouchHitTarget without hit slop values', () => {
590557
const Test = () => (
591558
<EventComponent>
592559
<div>
@@ -596,9 +563,7 @@ describe('TouchHitTarget', () => {
596563
);
597564

598565
let output = ReactDOMServer.renderToString(<Test />);
599-
expect(output).toBe(
600-
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
601-
);
566+
expect(output).toBe('<div></div>');
602567

603568
const Test2 = () => (
604569
<EventComponent>
@@ -609,9 +574,7 @@ describe('TouchHitTarget', () => {
609574
);
610575

611576
output = ReactDOMServer.renderToString(<Test2 />);
612-
expect(output).toBe(
613-
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:0px;right:0x;top:0px"></div></div>',
614-
);
577+
expect(output).toBe('<div></div>');
615578

616579
const Test3 = () => (
617580
<EventComponent>
@@ -622,9 +585,7 @@ describe('TouchHitTarget', () => {
622585
);
623586

624587
output = ReactDOMServer.renderToString(<Test3 />);
625-
expect(output).toBe(
626-
'<div><div style="position:absolute;z-index:-1;bottom:-4px;left:-2px;right:-3px;top:-1px"></div></div>',
627-
);
588+
expect(output).toBe('<div></div>');
628589
});
629590
});
630591
});

0 commit comments

Comments
 (0)