@samitouri / QOS-React-2 / commits / 7f696bd99c

fix: onFocus/onBlur/onBeforeInput have a matching event type (#19561)

* test: Add current behavior for event types of onFocus/onBlur * fix: onFocus/onBlur have a matching event type * fix useFocus * fix: don't compare native event types with react event types * Add FocusIn/FocusOutEventInterface * A simpler alternative fix * Add regression tests * Always pass React event type and fix beforeinput Co-authored-by: Dan Abramov <dan.abramov@me.com>

Sebastian Silbermann committed Aug 10, 2020 at 13:54 UTC 7f696bd99c39348a631c20378d2a8704634bab04
13 files changed +241 -41
packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+93
@@ -50,6 +50,7 @@ describe('ReactDOMEventListener', () => {
50 testNativeBubblingEvent({
51 type: 'div',
52 reactEvent: 'onAnimationEnd',
53 + reactEventType: 'animationend',
54 nativeEvent: 'animationend',
55 dispatch(node) {
56 node.dispatchEvent(
@@ -66,6 +67,7 @@ describe('ReactDOMEventListener', () => {
67 testNativeBubblingEvent({
68 type: 'div',
69 reactEvent: 'onAnimationIteration',
70 + reactEventType: 'animationiteration',
71 nativeEvent: 'animationiteration',
72 dispatch(node) {
73 node.dispatchEvent(
@@ -82,6 +84,7 @@ describe('ReactDOMEventListener', () => {
84 testNativeBubblingEvent({
85 type: 'div',
86 reactEvent: 'onAnimationStart',
87 + reactEventType: 'animationstart',
88 nativeEvent: 'animationstart',
89 dispatch(node) {
90 node.dispatchEvent(
@@ -98,6 +101,7 @@ describe('ReactDOMEventListener', () => {
101 testNativeBubblingEvent({
102 type: 'div',
103 reactEvent: 'onAuxClick',
104 + reactEventType: 'auxclick',
105 nativeEvent: 'auxclick',
106 dispatch(node) {
107 node.dispatchEvent(
@@ -114,6 +118,7 @@ describe('ReactDOMEventListener', () => {
118 testNativeBubblingEvent({
119 type: 'input',
120 reactEvent: 'onBlur',
121 + reactEventType: 'blur',
122 nativeEvent: 'focusout',
123 dispatch(node) {
124 const e = new Event('focusout', {
@@ -133,6 +138,7 @@ describe('ReactDOMEventListener', () => {
138 testNativeBubblingEvent({
139 type: 'div',
140 reactEvent: 'onClick',
141 + reactEventType: 'click',
142 nativeEvent: 'click',
143 dispatch(node) {
144 node.click();
@@ -144,6 +150,7 @@ describe('ReactDOMEventListener', () => {
150 testNativeBubblingEvent({
151 type: 'div',
152 reactEvent: 'onContextMenu',
153 + reactEventType: 'contextmenu',
154 nativeEvent: 'contextmenu',
155 dispatch(node) {
156 node.dispatchEvent(
@@ -160,6 +167,7 @@ describe('ReactDOMEventListener', () => {
167 testNativeBubblingEvent({
168 type: 'div',
169 reactEvent: 'onCopy',
170 + reactEventType: 'copy',
171 nativeEvent: 'copy',
172 dispatch(node) {
173 node.dispatchEvent(
@@ -176,6 +184,7 @@ describe('ReactDOMEventListener', () => {
184 testNativeBubblingEvent({
185 type: 'div',
186 reactEvent: 'onCut',
187 + reactEventType: 'cut',
188 nativeEvent: 'cut',
189 dispatch(node) {
190 node.dispatchEvent(
@@ -192,6 +201,7 @@ describe('ReactDOMEventListener', () => {
201 testNativeBubblingEvent({
202 type: 'div',
203 reactEvent: 'onDoubleClick',
204 + reactEventType: 'dblclick',
205 nativeEvent: 'dblclick',
206 dispatch(node) {
207 node.dispatchEvent(
@@ -208,6 +218,7 @@ describe('ReactDOMEventListener', () => {
218 testNativeBubblingEvent({
219 type: 'div',
220 reactEvent: 'onDrag',
221 + reactEventType: 'drag',
222 nativeEvent: 'drag',
223 dispatch(node) {
224 node.dispatchEvent(
@@ -224,6 +235,7 @@ describe('ReactDOMEventListener', () => {
235 testNativeBubblingEvent({
236 type: 'div',
237 reactEvent: 'onDragEnd',
238 + reactEventType: 'dragend',
239 nativeEvent: 'dragend',
240 dispatch(node) {
241 node.dispatchEvent(
@@ -240,6 +252,7 @@ describe('ReactDOMEventListener', () => {
252 testNativeBubblingEvent({
253 type: 'div',
254 reactEvent: 'onDragEnter',
255 + reactEventType: 'dragenter',
256 nativeEvent: 'dragenter',
257 dispatch(node) {
258 node.dispatchEvent(
@@ -256,6 +269,7 @@ describe('ReactDOMEventListener', () => {
269 testNativeBubblingEvent({
270 type: 'div',
271 reactEvent: 'onDragExit',
272 + reactEventType: 'dragexit',
273 nativeEvent: 'dragexit',
274 dispatch(node) {
275 node.dispatchEvent(
@@ -272,6 +286,7 @@ describe('ReactDOMEventListener', () => {
286 testNativeBubblingEvent({
287 type: 'div',
288 reactEvent: 'onDragLeave',
289 + reactEventType: 'dragleave',
290 nativeEvent: 'dragleave',
291 dispatch(node) {
292 node.dispatchEvent(
@@ -288,6 +303,7 @@ describe('ReactDOMEventListener', () => {
303 testNativeBubblingEvent({
304 type: 'div',
305 reactEvent: 'onDragOver',
306 + reactEventType: 'dragover',
307 nativeEvent: 'dragover',
308 dispatch(node) {
309 node.dispatchEvent(
@@ -304,6 +320,7 @@ describe('ReactDOMEventListener', () => {
320 testNativeBubblingEvent({
321 type: 'div',
322 reactEvent: 'onDragStart',
323 + reactEventType: 'dragstart',
324 nativeEvent: 'dragstart',
325 dispatch(node) {
326 node.dispatchEvent(
@@ -320,6 +337,7 @@ describe('ReactDOMEventListener', () => {
337 testNativeBubblingEvent({
338 type: 'div',
339 reactEvent: 'onDrop',
340 + reactEventType: 'drop',
341 nativeEvent: 'drop',
342 dispatch(node) {
343 node.dispatchEvent(
@@ -336,6 +354,7 @@ describe('ReactDOMEventListener', () => {
354 testNativeBubblingEvent({
355 type: 'input',
356 reactEvent: 'onFocus',
357 + reactEventType: 'focus',
358 nativeEvent: 'focusin',
359 dispatch(node) {
360 const e = new Event('focusin', {
@@ -351,6 +370,7 @@ describe('ReactDOMEventListener', () => {
370 testNativeBubblingEvent({
371 type: 'div',
372 reactEvent: 'onGotPointerCapture',
373 + reactEventType: 'gotpointercapture',
374 nativeEvent: 'gotpointercapture',
375 dispatch(node) {
376 node.dispatchEvent(
@@ -367,6 +387,7 @@ describe('ReactDOMEventListener', () => {
387 testNativeBubblingEvent({
388 type: 'input',
389 reactEvent: 'onKeyDown',
390 + reactEventType: 'keydown',
391 nativeEvent: 'keydown',
392 dispatch(node) {
393 node.dispatchEvent(
@@ -383,6 +404,7 @@ describe('ReactDOMEventListener', () => {
404 testNativeBubblingEvent({
405 type: 'input',
406 reactEvent: 'onKeyPress',
407 + reactEventType: 'keypress',
408 nativeEvent: 'keypress',
409 dispatch(node) {
410 node.dispatchEvent(
@@ -400,6 +422,7 @@ describe('ReactDOMEventListener', () => {
422 testNativeBubblingEvent({
423 type: 'input',
424 reactEvent: 'onKeyUp',
425 + reactEventType: 'keyup',
426 nativeEvent: 'keyup',
427 dispatch(node) {
428 node.dispatchEvent(
@@ -416,6 +439,7 @@ describe('ReactDOMEventListener', () => {
439 testNativeBubblingEvent({
440 type: 'div',
441 reactEvent: 'onLostPointerCapture',
442 + reactEventType: 'lostpointercapture',
443 nativeEvent: 'lostpointercapture',
444 dispatch(node) {
445 node.dispatchEvent(
@@ -432,6 +456,7 @@ describe('ReactDOMEventListener', () => {
456 testNativeBubblingEvent({
457 type: 'div',
458 reactEvent: 'onMouseDown',
459 + reactEventType: 'mousedown',
460 nativeEvent: 'mousedown',
461 dispatch(node) {
462 node.dispatchEvent(
@@ -448,6 +473,7 @@ describe('ReactDOMEventListener', () => {
473 testNativeBubblingEvent({
474 type: 'div',
475 reactEvent: 'onMouseOut',
476 + reactEventType: 'mouseout',
477 nativeEvent: 'mouseout',
478 dispatch(node) {
479 node.dispatchEvent(
@@ -464,6 +490,7 @@ describe('ReactDOMEventListener', () => {
490 testNativeBubblingEvent({
491 type: 'div',
492 reactEvent: 'onMouseOver',
493 + reactEventType: 'mouseover',
494 nativeEvent: 'mouseover',
495 dispatch(node) {
496 node.dispatchEvent(
@@ -480,6 +507,7 @@ describe('ReactDOMEventListener', () => {
507 testNativeBubblingEvent({
508 type: 'div',
509 reactEvent: 'onMouseUp',
510 + reactEventType: 'mouseup',
511 nativeEvent: 'mouseup',
512 dispatch(node) {
513 node.dispatchEvent(
@@ -496,6 +524,7 @@ describe('ReactDOMEventListener', () => {
524 testNativeBubblingEvent({
525 type: 'div',
526 reactEvent: 'onPaste',
527 + reactEventType: 'paste',
528 nativeEvent: 'paste',
529 dispatch(node) {
530 node.dispatchEvent(
@@ -512,6 +541,7 @@ describe('ReactDOMEventListener', () => {
541 testNativeBubblingEvent({
542 type: 'div',
543 reactEvent: 'onPointerCancel',
544 + reactEventType: 'pointercancel',
545 nativeEvent: 'pointercancel',
546 dispatch(node) {
547 node.dispatchEvent(
@@ -528,6 +558,7 @@ describe('ReactDOMEventListener', () => {
558 testNativeBubblingEvent({
559 type: 'div',
560 reactEvent: 'onPointerDown',
561 + reactEventType: 'pointerdown',
562 nativeEvent: 'pointerdown',
563 dispatch(node) {
564 node.dispatchEvent(
@@ -544,6 +575,7 @@ describe('ReactDOMEventListener', () => {
575 testNativeBubblingEvent({
576 type: 'div',
577 reactEvent: 'onPointerMove',
578 + reactEventType: 'pointermove',
579 nativeEvent: 'pointermove',
580 dispatch(node) {
581 node.dispatchEvent(
@@ -560,6 +592,7 @@ describe('ReactDOMEventListener', () => {
592 testNativeBubblingEvent({
593 type: 'div',
594 reactEvent: 'onPointerOut',
595 + reactEventType: 'pointerout',
596 nativeEvent: 'pointerout',
597 dispatch(node) {
598 node.dispatchEvent(
@@ -576,6 +609,7 @@ describe('ReactDOMEventListener', () => {
609 testNativeBubblingEvent({
610 type: 'div',
611 reactEvent: 'onPointerOver',
612 + reactEventType: 'pointerover',
613 nativeEvent: 'pointerover',
614 dispatch(node) {
615 node.dispatchEvent(
@@ -592,6 +626,7 @@ describe('ReactDOMEventListener', () => {
626 testNativeBubblingEvent({
627 type: 'div',
628 reactEvent: 'onPointerUp',
629 + reactEventType: 'pointerup',
630 nativeEvent: 'pointerup',
631 dispatch(node) {
632 node.dispatchEvent(
@@ -608,6 +643,7 @@ describe('ReactDOMEventListener', () => {
643 testNativeBubblingEvent({
644 type: 'form',
645 reactEvent: 'onReset',
646 + reactEventType: 'reset',
647 nativeEvent: 'reset',
648 dispatch(node) {
649 const e = new Event('reset', {
@@ -623,6 +659,7 @@ describe('ReactDOMEventListener', () => {
659 testNativeBubblingEvent({
660 type: 'form',
661 reactEvent: 'onSubmit',
662 + reactEventType: 'submit',
663 nativeEvent: 'submit',
664 dispatch(node) {
665 const e = new Event('submit', {
@@ -638,6 +675,7 @@ describe('ReactDOMEventListener', () => {
675 testNativeBubblingEvent({
676 type: 'div',
677 reactEvent: 'onTouchCancel',
678 + reactEventType: 'touchcancel',
679 nativeEvent: 'touchcancel',
680 dispatch(node) {
681 node.dispatchEvent(
@@ -654,6 +692,7 @@ describe('ReactDOMEventListener', () => {
692 testNativeBubblingEvent({
693 type: 'div',
694 reactEvent: 'onTouchEnd',
695 + reactEventType: 'touchend',
696 nativeEvent: 'touchend',
697 dispatch(node) {
698 node.dispatchEvent(
@@ -670,6 +709,7 @@ describe('ReactDOMEventListener', () => {
709 testNativeBubblingEvent({
710 type: 'div',
711 reactEvent: 'onTouchMove',
712 + reactEventType: 'touchmove',
713 nativeEvent: 'touchmove',
714 dispatch(node) {
715 node.dispatchEvent(
@@ -686,6 +726,7 @@ describe('ReactDOMEventListener', () => {
726 testNativeBubblingEvent({
727 type: 'div',
728 reactEvent: 'onTouchStart',
729 + reactEventType: 'touchstart',
730 nativeEvent: 'touchstart',
731 dispatch(node) {
732 node.dispatchEvent(
@@ -702,6 +743,7 @@ describe('ReactDOMEventListener', () => {
743 testNativeBubblingEvent({
744 type: 'div',
745 reactEvent: 'onTransitionEnd',
746 + reactEventType: 'transitionend',
747 nativeEvent: 'transitionend',
748 dispatch(node) {
749 node.dispatchEvent(
@@ -718,6 +760,7 @@ describe('ReactDOMEventListener', () => {
760 testNativeBubblingEvent({
761 type: 'div',
762 reactEvent: 'onWheel',
763 + reactEventType: 'wheel',
764 nativeEvent: 'wheel',
765 dispatch(node) {
766 node.dispatchEvent(
@@ -736,6 +779,7 @@ describe('ReactDOMEventListener', () => {
779 testEmulatedBubblingEvent({
780 type: 'video',
781 reactEvent: 'onAbort',
782 + reactEventType: 'abort',
783 nativeEvent: 'abort',
784 dispatch(node) {
785 const e = new Event('abort', {
@@ -751,6 +795,7 @@ describe('ReactDOMEventListener', () => {
795 testEmulatedBubblingEvent({
796 type: 'dialog',
797 reactEvent: 'onCancel',
798 + reactEventType: 'cancel',
799 nativeEvent: 'cancel',
800 dispatch(node) {
801 const e = new Event('cancel', {
@@ -766,6 +811,7 @@ describe('ReactDOMEventListener', () => {
811 testEmulatedBubblingEvent({
812 type: 'video',
813 reactEvent: 'onCanPlay',
814 + reactEventType: 'canplay',
815 nativeEvent: 'canplay',
816 dispatch(node) {
817 const e = new Event('canplay', {
@@ -781,6 +827,7 @@ describe('ReactDOMEventListener', () => {
827 testEmulatedBubblingEvent({
828 type: 'video',
829 reactEvent: 'onCanPlayThrough',
830 + reactEventType: 'canplaythrough',
831 nativeEvent: 'canplaythrough',
832 dispatch(node) {
833 const e = new Event('canplaythrough', {
@@ -796,6 +843,7 @@ describe('ReactDOMEventListener', () => {
843 testEmulatedBubblingEvent({
844 type: 'dialog',
845 reactEvent: 'onClose',
846 + reactEventType: 'close',
847 nativeEvent: 'close',
848 dispatch(node) {
849 const e = new Event('close', {
@@ -811,6 +859,7 @@ describe('ReactDOMEventListener', () => {
859 testEmulatedBubblingEvent({
860 type: 'video',
861 reactEvent: 'onDurationChange',
862 + reactEventType: 'durationchange',
863 nativeEvent: 'durationchange',
864 dispatch(node) {
865 const e = new Event('durationchange', {
@@ -826,6 +875,7 @@ describe('ReactDOMEventListener', () => {
875 testEmulatedBubblingEvent({
876 type: 'video',
877 reactEvent: 'onEmptied',
878 + reactEventType: 'emptied',
879 nativeEvent: 'emptied',
880 dispatch(node) {
881 const e = new Event('emptied', {
@@ -841,6 +891,7 @@ describe('ReactDOMEventListener', () => {
891 testEmulatedBubblingEvent({
892 type: 'video',
893 reactEvent: 'onEncrypted',
894 + reactEventType: 'encrypted',
895 nativeEvent: 'encrypted',
896 dispatch(node) {
897 const e = new Event('encrypted', {
@@ -856,6 +907,7 @@ describe('ReactDOMEventListener', () => {
907 testEmulatedBubblingEvent({
908 type: 'video',
909 reactEvent: 'onEnded',
910 + reactEventType: 'ended',
911 nativeEvent: 'ended',
912 dispatch(node) {
913 const e = new Event('ended', {
@@ -871,6 +923,7 @@ describe('ReactDOMEventListener', () => {
923 testEmulatedBubblingEvent({
924 type: 'img',
925 reactEvent: 'onError',
926 + reactEventType: 'error',
927 nativeEvent: 'error',
928 dispatch(node) {
929 const e = new Event('error', {
@@ -886,6 +939,7 @@ describe('ReactDOMEventListener', () => {
939 testEmulatedBubblingEvent({
940 type: 'input',
941 reactEvent: 'onInvalid',
942 + reactEventType: 'invalid',
943 nativeEvent: 'invalid',
944 dispatch(node) {
945 const e = new Event('invalid', {
@@ -901,6 +955,7 @@ describe('ReactDOMEventListener', () => {
955 testEmulatedBubblingEvent({
956 type: 'img',
957 reactEvent: 'onLoad',
958 + reactEventType: 'load',
959 nativeEvent: 'load',
960 dispatch(node) {
961 const e = new Event('load', {
@@ -916,6 +971,7 @@ describe('ReactDOMEventListener', () => {
971 testEmulatedBubblingEvent({
972 type: 'video',
973 reactEvent: 'onLoadedData',
974 + reactEventType: 'loadeddata',
975 nativeEvent: 'loadeddata',
976 dispatch(node) {
977 const e = new Event('loadeddata', {
@@ -931,6 +987,7 @@ describe('ReactDOMEventListener', () => {
987 testEmulatedBubblingEvent({
988 type: 'video',
989 reactEvent: 'onLoadedMetadata',
990 + reactEventType: 'loadedmetadata',
991 nativeEvent: 'loadedmetadata',
992 dispatch(node) {
993 const e = new Event('loadedmetadata', {
@@ -946,6 +1003,7 @@ describe('ReactDOMEventListener', () => {
1003 testEmulatedBubblingEvent({
1004 type: 'video',
1005 reactEvent: 'onLoadStart',
1006 + reactEventType: 'loadstart',
1007 nativeEvent: 'loadstart',
1008 dispatch(node) {
1009 const e = new Event('loadstart', {
@@ -961,6 +1019,7 @@ describe('ReactDOMEventListener', () => {
1019 testEmulatedBubblingEvent({
1020 type: 'video',
1021 reactEvent: 'onPause',
1022 + reactEventType: 'pause',
1023 nativeEvent: 'pause',
1024 dispatch(node) {
1025 const e = new Event('pause', {
@@ -976,6 +1035,7 @@ describe('ReactDOMEventListener', () => {
1035 testEmulatedBubblingEvent({
1036 type: 'video',
1037 reactEvent: 'onPlay',
1038 + reactEventType: 'play',
1039 nativeEvent: 'play',
1040 dispatch(node) {
1041 const e = new Event('play', {
@@ -991,6 +1051,7 @@ describe('ReactDOMEventListener', () => {
1051 testEmulatedBubblingEvent({
1052 type: 'video',
1053 reactEvent: 'onPlaying',
1054 + reactEventType: 'playing',
1055 nativeEvent: 'playing',
1056 dispatch(node) {
1057 const e = new Event('playing', {
@@ -1006,6 +1067,7 @@ describe('ReactDOMEventListener', () => {
1067 testEmulatedBubblingEvent({
1068 type: 'video',
1069 reactEvent: 'onProgress',
1070 + reactEventType: 'progress',
1071 nativeEvent: 'progress',
1072 dispatch(node) {
1073 const e = new Event('progress', {
@@ -1021,6 +1083,7 @@ describe('ReactDOMEventListener', () => {
1083 testEmulatedBubblingEvent({
1084 type: 'video',
1085 reactEvent: 'onRateChange',
1086 + reactEventType: 'ratechange',
1087 nativeEvent: 'ratechange',
1088 dispatch(node) {
1089 const e = new Event('ratechange', {
@@ -1036,6 +1099,7 @@ describe('ReactDOMEventListener', () => {
1099 testEmulatedBubblingEvent({
1100 type: 'video',
1101 reactEvent: 'onSeeked',
1102 + reactEventType: 'seeked',
1103 nativeEvent: 'seeked',
1104 dispatch(node) {
1105 const e = new Event('seeked', {
@@ -1051,6 +1115,7 @@ describe('ReactDOMEventListener', () => {
1115 testEmulatedBubblingEvent({
1116 type: 'video',
1117 reactEvent: 'onSeeking',
1118 + reactEventType: 'seeking',
1119 nativeEvent: 'seeking',
1120 dispatch(node) {
1121 const e = new Event('seeking', {
@@ -1066,6 +1131,7 @@ describe('ReactDOMEventListener', () => {
1131 testEmulatedBubblingEvent({
1132 type: 'video',
1133 reactEvent: 'onStalled',
1134 + reactEventType: 'stalled',
1135 nativeEvent: 'stalled',
1136 dispatch(node) {
1137 const e = new Event('stalled', {
@@ -1081,6 +1147,7 @@ describe('ReactDOMEventListener', () => {
1147 testEmulatedBubblingEvent({
1148 type: 'video',
1149 reactEvent: 'onSuspend',
1150 + reactEventType: 'suspend',
1151 nativeEvent: 'suspend',
1152 dispatch(node) {
1153 const e = new Event('suspend', {
@@ -1096,6 +1163,7 @@ describe('ReactDOMEventListener', () => {
1163 testEmulatedBubblingEvent({
1164 type: 'video',
1165 reactEvent: 'onTimeUpdate',
1166 + reactEventType: 'timeupdate',
1167 nativeEvent: 'timeupdate',
1168 dispatch(node) {
1169 const e = new Event('timeupdate', {
@@ -1111,6 +1179,7 @@ describe('ReactDOMEventListener', () => {
1179 testEmulatedBubblingEvent({
1180 type: 'details',
1181 reactEvent: 'onToggle',
1182 + reactEventType: 'toggle',
1183 nativeEvent: 'toggle',
1184 dispatch(node) {
1185 const e = new Event('toggle', {
@@ -1126,6 +1195,7 @@ describe('ReactDOMEventListener', () => {
1195 testEmulatedBubblingEvent({
1196 type: 'video',
1197 reactEvent: 'onVolumeChange',
1198 + reactEventType: 'volumechange',
1199 nativeEvent: 'volumechange',
1200 dispatch(node) {
1201 const e = new Event('volumechange', {
@@ -1141,6 +1211,7 @@ describe('ReactDOMEventListener', () => {
1211 testEmulatedBubblingEvent({
1212 type: 'video',
1213 reactEvent: 'onWaiting',
1214 + reactEventType: 'waiting',
1215 nativeEvent: 'waiting',
1216 dispatch(node) {
1217 const e = new Event('waiting', {
@@ -1158,6 +1229,7 @@ describe('ReactDOMEventListener', () => {
1229 testNonBubblingEvent({
1230 type: 'div',
1231 reactEvent: 'onScroll',
1232 + reactEventType: 'scroll',
1233 nativeEvent: 'scroll',
1234 dispatch(node) {
1235 const e = new Event('scroll', {
@@ -1368,6 +1440,7 @@ describe('ReactDOMEventListener', () => {
1440 log.push('- outer parent');
1441 },
1442 onBeforeInputCapture: e => {
1443 + expect(e.type).toBe('beforeinput');
1444 log.push('- outer parent capture');
1445 },
1446 }}
@@ -1430,6 +1503,7 @@ describe('ReactDOMEventListener', () => {
1503 log.push('- outer parent');
1504 },
1505 onChangeCapture: e => {
1506 + expect(e.type).toBe('change');
1507 log.push('- outer parent capture');
1508 },
1509 }}
@@ -1488,6 +1562,7 @@ describe('ReactDOMEventListener', () => {
1562 log.push('- outer parent');
1563 },
1564 onCompositionStartCapture: e => {
1565 + expect(e.type).toBe('compositionstart');
1566 log.push('- outer parent capture');
1567 },
1568 }}
@@ -1549,6 +1624,7 @@ describe('ReactDOMEventListener', () => {
1624 log.push('- outer parent');
1625 },
1626 onCompositionEndCapture: e => {
1627 + expect(e.type).toBe('compositionend');
1628 log.push('- outer parent capture');
1629 },
1630 }}
@@ -1610,6 +1686,7 @@ describe('ReactDOMEventListener', () => {
1686 log.push('- outer parent');
1687 },
1688 onCompositionUpdateCapture: e => {
1689 + expect(e.type).toBe('compositionupdate');
1690 log.push('- outer parent capture');
1691 },
1692 }}
@@ -1671,6 +1748,7 @@ describe('ReactDOMEventListener', () => {
1748 log.push('- outer parent');
1749 },
1750 onSelectCapture: e => {
1751 + expect(e.type).toBe('select');
1752 log.push('- outer parent capture');
1753 },
1754 }}
@@ -1769,6 +1847,7 @@ describe('ReactDOMEventListener', () => {
1847 log.push('- outer parent');
1848 },
1849 [eventConfig.reactEvent + 'Capture']: e => {
1850 + expect(e.type).toBe(eventConfig.reactEventType);
1851 log.push('- outer parent capture');
1852 },
1853 }}
@@ -1825,6 +1904,7 @@ describe('ReactDOMEventListener', () => {
1904 log.push('- outer parent');
1905 },
1906 [eventConfig.reactEvent + 'Capture']: e => {
1907 + expect(e.type).toBe(eventConfig.reactEventType);
1908 log.push('- outer parent capture');
1909 },
1910 }}
@@ -1883,6 +1963,7 @@ describe('ReactDOMEventListener', () => {
1963 log.push('- outer parent');
1964 },
1965 [eventConfig.reactEvent + 'Capture']: e => {
1966 + expect(e.type).toBe(eventConfig.reactEventType);
1967 log.push('- outer parent capture');
1968 },
1969 }}
@@ -1935,6 +2016,7 @@ describe('ReactDOMEventListener', () => {
2016 log.push('- outer parent');
2017 },
2018 [eventConfig.reactEvent + 'Capture']: e => {
2019 + expect(e.type).toBe(eventConfig.reactEventType);
2020 log.push('- outer parent capture');
2021 },
2022 }}
@@ -1986,6 +2068,7 @@ describe('ReactDOMEventListener', () => {
2068 log.push('- outer parent');
2069 },
2070 [eventConfig.reactEvent + 'Capture']: e => {
2071 + expect(e.type).toBe(eventConfig.reactEventType);
2072 log.push('- outer parent capture');
2073 },
2074 }}
@@ -2039,6 +2122,7 @@ describe('ReactDOMEventListener', () => {
2122 log.push('- outer parent');
2123 },
2124 [eventConfig.reactEvent + 'Capture']: e => {
2125 + expect(e.type).toBe(eventConfig.reactEventType);
2126 log.push('- outer parent capture');
2127 },
2128 }}
@@ -2103,6 +2187,7 @@ describe('ReactDOMEventListener', () => {
2187 log.push('- outer parent');
2188 },
2189 [eventConfig.reactEvent + 'Capture']: e => {
2190 + expect(e.type).toBe(eventConfig.reactEventType);
2191 log.push('- outer parent capture');
2192 },
2193 }}
@@ -2165,6 +2250,7 @@ describe('ReactDOMEventListener', () => {
2250 log.push('- outer parent');
2251 },
2252 [eventConfig.reactEvent + 'Capture']: e => {
2253 + expect(e.type).toBe(eventConfig.reactEventType);
2254 log.push('- outer parent capture');
2255 },
2256 }}
@@ -2228,6 +2314,7 @@ describe('ReactDOMEventListener', () => {
2314 log.push('- outer parent');
2315 },
2316 [eventConfig.reactEvent + 'Capture']: e => {
2317 + expect(e.type).toBe(eventConfig.reactEventType);
2318 log.push('- outer parent capture');
2319 },
2320 }}
@@ -2282,6 +2369,7 @@ describe('ReactDOMEventListener', () => {
2369 log.push('- outer parent');
2370 },
2371 [eventConfig.reactEvent + 'Capture']: e => {
2372 + expect(e.type).toBe(eventConfig.reactEventType);
2373 log.push('- outer parent capture');
2374 },
2375 }}
@@ -2350,6 +2438,7 @@ describe('ReactDOMEventListener', () => {
2438 log.push('- outer parent');
2439 },
2440 [eventConfig.reactEvent + 'Capture']: e => {
2441 + expect(e.type).toBe(eventConfig.reactEventType);
2442 log.push('- outer parent capture');
2443 },
2444 }}
@@ -2417,6 +2506,7 @@ describe('ReactDOMEventListener', () => {
2506 log.push('- outer parent');
2507 },
2508 [eventConfig.reactEvent + 'Capture']: e => {
2509 + expect(e.type).toBe(eventConfig.reactEventType);
2510 log.push('- outer parent capture');
2511 },
2512 }}
@@ -2482,6 +2572,7 @@ describe('ReactDOMEventListener', () => {
2572 log.push('- outer parent');
2573 },
2574 [eventConfig.reactEvent + 'Capture']: e => {
2575 + expect(e.type).toBe(eventConfig.reactEventType);
2576 log.push('- outer parent capture');
2577 },
2578 }}
@@ -2547,6 +2638,7 @@ describe('ReactDOMEventListener', () => {
2638 log.push('- outer parent');
2639 },
2640 [eventConfig.reactEvent + 'Capture']: e => {
2641 + expect(e.type).toBe(eventConfig.reactEventType);
2642 log.push('- outer parent capture');
2643 },
2644 }}
@@ -2615,6 +2707,7 @@ describe('ReactDOMEventListener', () => {
2707 log.push('- outer parent');
2708 },
2709 [eventConfig.reactEvent + 'Capture']: e => {
2710 + expect(e.type).toBe(eventConfig.reactEventType);
2711 log.push('- outer parent capture');
2712 },
2713 }}
packages/react-dom/src/events/DOMPluginEventSystem.js
+1 -1
@@ -709,7 +709,7 @@ export function accumulateSinglePhaseListeners(
709
710 let instance = targetFiber;
711 let lastHostComponent = null;
712 - const targetType = event.type;
712 + const targetType = event.nativeEvent.type;
713
714 // Accumulate all instances and listeners via the target -> root path.
715 while (instance !== null) {
packages/react-dom/src/events/ReactSyntheticEventType.js
+1
@@ -29,6 +29,7 @@ export type ReactSyntheticEvent = {|
29 _dispatchListeners?: null | Array<Function> | Function,
30 _reactName: string,
31 _targetInst: Fiber,
32 + nativeEvent: Event,
33 type: string,
34 currentTarget: null | EventTarget,
35 |};
packages/react-dom/src/events/SyntheticEvent.js
+2 -1
@@ -14,7 +14,6 @@ import getEventCharCode from './getEventCharCode';
14 * @see http://www.w3.org/TR/DOM-Level-3-Events/
15 */
16 const EventInterface = {
17 - type: 0,
17 eventPhase: 0,
18 bubbles: 0,
19 cancelable: 0,
@@ -48,6 +47,7 @@ function functionThatReturnsFalse() {
47 */
48 export function SyntheticEvent(
49 reactName,
50 + reactEventType,
51 targetInst,
52 nativeEvent,
53 nativeEventTarget,
@@ -55,6 +55,7 @@ export function SyntheticEvent(
55 ) {
56 this._reactName = reactName;
57 this._targetInst = targetInst;
58 + this.type = reactEventType;
59 this.nativeEvent = nativeEvent;
60 this.target = nativeEventTarget;
61 this.currentTarget = null;
packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js new
+70
@@ -0,0 +1,70 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + */
7 +
8 +'use strict';
9 +
10 +describe('SyntheticFocusEvent', () => {
11 + let React;
12 + let ReactDOM;
13 + let container;
14 +
15 + beforeEach(() => {
16 + jest.resetModules();
17 + React = require('react');
18 + ReactDOM = require('react-dom');
19 +
20 + container = document.createElement('div');
21 + document.body.appendChild(container);
22 + });
23 +
24 + afterEach(() => {
25 + document.body.removeChild(container);
26 + container = null;
27 + });
28 +
29 + test('onFocus events have the focus type', () => {
30 + const log = [];
31 + ReactDOM.render(
32 + <button
33 + onFocus={event => log.push(`onFocus: ${event.type}`)}
34 + onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
35 + />,
36 + container,
37 + );
38 + const button = container.querySelector('button');
39 +
40 + button.dispatchEvent(
41 + new FocusEvent('focusin', {
42 + bubbles: true,
43 + cancelable: false,
44 + }),
45 + );
46 +
47 + expect(log).toEqual(['onFocusCapture: focus', 'onFocus: focus']);
48 + });
49 +
50 + test('onBlur events have the blur type', () => {
51 + const log = [];
52 + ReactDOM.render(
53 + <button
54 + onBlur={event => log.push(`onBlur: ${event.type}`)}
55 + onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
56 + />,
57 + container,
58 + );
59 + const button = container.querySelector('button');
60 +
61 + button.dispatchEvent(
62 + new FocusEvent('focusout', {
63 + bubbles: true,
64 + cancelable: false,
65 + }),
66 + );
67 +
68 + expect(log).toEqual(['onBlurCapture: blur', 'onBlur: blur']);
69 + });
70 +});
packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
+2
@@ -229,6 +229,7 @@ function extractCompositionEvent(
229
230 const event = new SyntheticEvent(
231 eventType,
232 + domEventName,
233 null,
234 nativeEvent,
235 nativeEventTarget,
@@ -397,6 +398,7 @@ function extractBeforeInputEvent(
398
399 const event = new SyntheticEvent(
400 'onBeforeInput',
401 + 'beforeinput',
402 null,
403 nativeEvent,
404 nativeEventTarget,
packages/react-dom/src/events/plugins/ChangeEventPlugin.js
+7 -2
@@ -49,8 +49,13 @@ function createAndAccumulateChangeEvent(
49 nativeEvent,
50 target,
51 ) {
52 - const event = new SyntheticEvent('onChange', null, nativeEvent, target);
53 - event.type = 'change';
52 + const event = new SyntheticEvent(
53 + 'onChange',
54 + 'change',
55 + null,
56 + nativeEvent,
57 + target,
58 + );
59 // Flag this event loop as needing state restore.
60 enqueueStateRestore(((target: any): Node));
61 accumulateTwoPhaseListeners(inst, dispatchQueue, event);
packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
+2 -2
@@ -133,23 +133,23 @@ function extractEvents(
133
134 const leave = new SyntheticEvent(
135 leaveEventType,
136 + eventTypePrefix + 'leave',
137 from,
138 nativeEvent,
139 nativeEventTarget,
140 eventInterface,
141 );
141 - leave.type = eventTypePrefix + 'leave';
142 leave.target = fromNode;
143 leave.relatedTarget = toNode;
144
145 let enter = new SyntheticEvent(
146 enterEventType,
147 + eventTypePrefix + 'enter',
148 to,
149 nativeEvent,
150 nativeEventTarget,
151 eventInterface,
152 );
152 - enter.type = eventTypePrefix + 'enter';
153 enter.target = toNode;
154 enter.relatedTarget = fromNode;
155
packages/react-dom/src/events/plugins/SelectEventPlugin.js
+1 -2
@@ -114,12 +114,11 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
114
115 const syntheticEvent = new SyntheticEvent(
116 'onSelect',
117 + 'select',
118 null,
119 nativeEvent,
120 nativeEventTarget,
121 );
121 -
122 - syntheticEvent.type = 'select';
122 syntheticEvent.target = activeElement;
123
124 accumulateTwoPhaseListeners(
packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+8
@@ -63,6 +63,7 @@ function extractEvents(
63 return;
64 }
65 let EventInterface;
66 + let reactEventType = domEventName;
67 switch (domEventName) {
68 case 'keypress':
69 // Firefox creates a keypress event for function keys too. This removes
@@ -77,7 +78,13 @@ function extractEvents(
78 EventInterface = KeyboardEventInterface;
79 break;
80 case 'focusin':
81 + reactEventType = 'focus';
82 + EventInterface = FocusEventInterface;
83 + break;
84 case 'focusout':
85 + reactEventType = 'blur';
86 + EventInterface = FocusEventInterface;
87 + break;
88 case 'beforeblur':
89 case 'afterblur':
90 EventInterface = FocusEventInterface;
@@ -152,6 +159,7 @@ function extractEvents(
159 }
160 const event = new SyntheticEvent(
161 reactName,
162 + reactEventType,
163 null,
164 nativeEvent,
165 nativeEventTarget,
packages/react-dom/src/events/plugins/__tests__/ModernBeforeInputEventPlugin-test.js
+52 -32
@@ -224,14 +224,16 @@ describe('BeforeInputEventPlugin', () => {
224 {
225 run: ({beforeInputEvent, spyOnBeforeInput}) => {
226 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
227 - expect(beforeInputEvent.type).toBe('compositionend');
227 + expect(beforeInputEvent.nativeEvent.type).toBe('compositionend');
228 + expect(beforeInputEvent.type).toBe('beforeinput');
229 expect(beforeInputEvent.data).toBe('test string 3');
230 },
231 },
232 {
233 run: ({beforeInputEvent, spyOnBeforeInput}) => {
234 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
234 - expect(beforeInputEvent.type).toBe('textInput');
235 + expect(beforeInputEvent.nativeEvent.type).toBe('textInput');
236 + expect(beforeInputEvent.type).toBe('beforeinput');
237 expect(beforeInputEvent.data).toBe('abcß');
238 },
239 },
@@ -244,7 +246,8 @@ describe('BeforeInputEventPlugin', () => {
246 {
247 run: ({beforeInputEvent, spyOnBeforeInput}) => {
248 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
247 - expect(beforeInputEvent.type).toBe('keypress');
249 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
250 + expect(beforeInputEvent.type).toBe('beforeinput');
251 expect(beforeInputEvent.data).toBe(' ');
252 },
253 },
@@ -281,7 +284,8 @@ describe('BeforeInputEventPlugin', () => {
284 {
285 run: ({beforeInputEvent, spyOnBeforeInput}) => {
286 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
284 - expect(beforeInputEvent.type).toBe('textInput');
287 + expect(beforeInputEvent.nativeEvent.type).toBe('textInput');
288 + expect(beforeInputEvent.type).toBe('beforeinput');
289 expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
290 },
291 },
@@ -359,14 +363,16 @@ describe('BeforeInputEventPlugin', () => {
363 {
364 run: ({beforeInputEvent, spyOnBeforeInput}) => {
365 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
362 - expect(beforeInputEvent.type).toBe('keypress');
366 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
367 + expect(beforeInputEvent.type).toBe('beforeinput');
368 expect(beforeInputEvent.data).toBe('a');
369 },
370 },
371 {
372 run: ({beforeInputEvent, spyOnBeforeInput}) => {
373 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
369 - expect(beforeInputEvent.type).toBe('keypress');
374 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
375 + expect(beforeInputEvent.type).toBe('beforeinput');
376 expect(beforeInputEvent.data).toBe(' ');
377 },
378 },
@@ -391,14 +397,16 @@ describe('BeforeInputEventPlugin', () => {
397 {
398 run: ({beforeInputEvent, spyOnBeforeInput}) => {
399 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
394 - expect(beforeInputEvent.type).toBe('keypress');
400 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
401 + expect(beforeInputEvent.type).toBe('beforeinput');
402 expect(beforeInputEvent.data).toBe('c');
403 },
404 },
405 {
406 run: ({beforeInputEvent, spyOnBeforeInput}) => {
407 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
401 - expect(beforeInputEvent.type).toBe('keypress');
408 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
409 + expect(beforeInputEvent.type).toBe('beforeinput');
410 expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
411 },
412 },
@@ -482,14 +490,16 @@ describe('BeforeInputEventPlugin', () => {
490 {
491 run: ({beforeInputEvent, spyOnBeforeInput}) => {
492 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
485 - expect(beforeInputEvent.type).toBe('keypress');
493 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
494 + expect(beforeInputEvent.type).toBe('beforeinput');
495 expect(beforeInputEvent.data).toBe('a');
496 },
497 },
498 {
499 run: ({beforeInputEvent, spyOnBeforeInput}) => {
500 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
492 - expect(beforeInputEvent.type).toBe('keypress');
501 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
502 + expect(beforeInputEvent.type).toBe('beforeinput');
503 expect(beforeInputEvent.data).toBe(' ');
504 },
505 },
@@ -514,14 +524,16 @@ describe('BeforeInputEventPlugin', () => {
524 {
525 run: ({beforeInputEvent, spyOnBeforeInput}) => {
526 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
517 - expect(beforeInputEvent.type).toBe('keypress');
527 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
528 + expect(beforeInputEvent.type).toBe('beforeinput');
529 expect(beforeInputEvent.data).toBe('c');
530 },
531 },
532 {
533 run: ({beforeInputEvent, spyOnBeforeInput}) => {
534 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
524 - expect(beforeInputEvent.type).toBe('keypress');
535 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
536 + expect(beforeInputEvent.type).toBe('beforeinput');
537 expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
538 },
539 },
@@ -540,7 +552,8 @@ describe('BeforeInputEventPlugin', () => {
552 {
553 run: ({beforeInputEvent, spyOnBeforeInput}) => {
554 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
543 - expect(beforeInputEvent.type).toBe('keydown');
555 + expect(beforeInputEvent.nativeEvent.type).toBe('keydown');
556 + expect(beforeInputEvent.type).toBe('beforeinput');
557 expect(beforeInputEvent.data).toBe('bar');
558 },
559 },
@@ -553,7 +566,8 @@ describe('BeforeInputEventPlugin', () => {
566 {
567 run: ({beforeInputEvent, spyOnBeforeInput}) => {
568 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
556 - expect(beforeInputEvent.type).toBe('keyup');
569 + expect(beforeInputEvent.nativeEvent.type).toBe('keyup');
570 + expect(beforeInputEvent.type).toBe('beforeinput');
571 expect(beforeInputEvent.data).toBe('BAR');
572 },
573 },
@@ -566,7 +580,8 @@ describe('BeforeInputEventPlugin', () => {
580 {
581 run: ({beforeInputEvent, spyOnBeforeInput}) => {
582 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
569 - expect(beforeInputEvent.type).toBe('keypress');
583 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
584 + expect(beforeInputEvent.type).toBe('beforeinput');
585 expect(beforeInputEvent.data).toBe('Bar');
586 },
587 },
@@ -596,7 +611,8 @@ describe('BeforeInputEventPlugin', () => {
611 {
612 run: ({beforeInputEvent, spyOnBeforeInput}) => {
613 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
599 - expect(beforeInputEvent.type).toBe('compositionend');
614 + expect(beforeInputEvent.nativeEvent.type).toBe('compositionend');
615 + expect(beforeInputEvent.type).toBe('beforeinput');
616 expect(beforeInputEvent.data).toBe('test string 3');
617 },
618 },
@@ -609,14 +625,16 @@ describe('BeforeInputEventPlugin', () => {
625 {
626 run: ({beforeInputEvent, spyOnBeforeInput}) => {
627 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
612 - expect(beforeInputEvent.type).toBe('keypress');
628 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
629 + expect(beforeInputEvent.type).toBe('beforeinput');
630 expect(beforeInputEvent.data).toBe('a');
631 },
632 },
633 {
634 run: ({beforeInputEvent, spyOnBeforeInput}) => {
635 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
619 - expect(beforeInputEvent.type).toBe('keypress');
636 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
637 + expect(beforeInputEvent.type).toBe('beforeinput');
638 expect(beforeInputEvent.data).toBe(' ');
639 },
640 },
@@ -641,14 +659,16 @@ describe('BeforeInputEventPlugin', () => {
659 {
660 run: ({beforeInputEvent, spyOnBeforeInput}) => {
661 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
644 - expect(beforeInputEvent.type).toBe('keypress');
662 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
663 + expect(beforeInputEvent.type).toBe('beforeinput');
664 expect(beforeInputEvent.data).toBe('c');
665 },
666 },
667 {
668 run: ({beforeInputEvent, spyOnBeforeInput}) => {
669 expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
651 - expect(beforeInputEvent.type).toBe('keypress');
670 + expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
671 + expect(beforeInputEvent.type).toBe('beforeinput');
672 expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
673 },
674 },
@@ -715,17 +735,17 @@ describe('BeforeInputEventPlugin', () => {
735 const node = ReactDOM.render(
736 <input
737 type="text"
718 - onBeforeInput={({type, data}) => {
738 + onBeforeInput={e => {
739 spyOnBeforeInput();
720 - beforeInputEvent = {type, data};
740 + beforeInputEvent = e;
741 }}
722 - onCompositionStart={({type, data}) => {
742 + onCompositionStart={e => {
743 spyOnCompositionStart();
724 - compositionStartEvent = {type, data};
744 + compositionStartEvent = e;
745 }}
726 - onCompositionUpdate={({type, data}) => {
746 + onCompositionUpdate={e => {
747 spyOnCompositionUpdate();
728 - compositionUpdateEvent = {type, data};
748 + compositionUpdateEvent = e;
749 }}
750 />,
751 container,
@@ -761,17 +781,17 @@ describe('BeforeInputEventPlugin', () => {
781 const node = ReactDOM.render(
782 <div
783 contentEditable={true}
764 - onBeforeInput={({type, data}) => {
784 + onBeforeInput={e => {
785 spyOnBeforeInput();
766 - beforeInputEvent = {type, data};
786 + beforeInputEvent = e;
787 }}
768 - onCompositionStart={({type, data}) => {
788 + onCompositionStart={e => {
789 spyOnCompositionStart();
770 - compositionStartEvent = {type, data};
790 + compositionStartEvent = e;
791 }}
772 - onCompositionUpdate={({type, data}) => {
792 + onCompositionUpdate={e => {
793 spyOnCompositionUpdate();
774 - compositionUpdateEvent = {type, data};
794 + compositionUpdateEvent = e;
795 }}
796 />,
797 container,
packages/react-dom/src/test-utils/ReactTestUtils.js
+1
@@ -587,6 +587,7 @@ function makeSimulator(eventType) {
587 const targetInst = getInstanceFromNode(domNode);
588 const event = new SyntheticEvent(
589 reactName,
590 + fakeNativeEvent.type,
591 targetInst,
592 fakeNativeEvent,
593 domNode,
packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
+1 -1
@@ -36,7 +36,7 @@ function initializeModules(hasPointerEvents) {
36 const forcePointerEvents = true;
37 const table = [[forcePointerEvents], [!forcePointerEvents]];
38
39 -describe.each(table)(`useFocus`, hasPointerEvents => {
39 +describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
40 let container;
41
42 beforeEach(() => {