Remove TouchHitTarget SSR logic to prevent issues with mouse events (#15381)
Dominic Gannaway committed
Apr 11, 2019 at 12:05 UTC
a9eff329c6086cc12b7a61ff1b40ec9cc21c1c05
2 files changed
+13
-61
packages/react-dom/src/server/ReactPartialRenderer.js
+9
-18
@@ -1173,24 +1173,15 @@ class ReactDOMServerRenderer {
1173
elementType.$$typeof === REACT_EVENT_TARGET_TYPE &&
1174
elementType.type === REACT_EVENT_TARGET_TOUCH_HIT
1175
) {
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 '';
1185
}
1186
const nextChildren = toArray(
1187
((nextChild: any): ReactElement).props.children,
packages/react-events/src/__tests__/TouchHitTarget-test.internal.js
+4
-43
@@ -507,39 +507,6 @@ describe('TouchHitTarget', () => {
507
);
508
});
509
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
-
510
it('should hydrate TouchHitTarget hit slop elements correcty and patch them', () => {
511
const Test = () => (
512
<EventComponent>
@@ -586,7 +553,7 @@ describe('TouchHitTarget', () => {
553
expect(output).toBe('<div></div>');
554
});
555
589
- it('should render a TouchHitTarget with hit slop values', () => {
556
+ it('should render a TouchHitTarget without hit slop values', () => {
557
const Test = () => (
558
<EventComponent>
559
<div>
@@ -596,9 +563,7 @@ describe('TouchHitTarget', () => {
563
);
564
565
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>');
567
568
const Test2 = () => (
569
<EventComponent>
@@ -609,9 +574,7 @@ describe('TouchHitTarget', () => {
574
);
575
576
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>');
578
579
const Test3 = () => (
580
<EventComponent>
@@ -622,9 +585,7 @@ describe('TouchHitTarget', () => {
585
);
586
587
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>');
589
});
590
});
591
});