fix: don't compare native event types with react event types

facebook · Aug 8, 2020 · cc2ae0c · cc2ae0c
1 parent 0e98446
commit cc2ae0c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -709,7 +709,7 @@ export function accumulateSinglePhaseListeners(
 
   let instance = targetFiber;
   let lastHostComponent = null;
-  const targetType = event.type;
+  const targetType = event.nativeEvent.type;
 
   // Accumulate all instances and listeners via the target -> root path.
   while (instance !== null) {

diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js
@@ -29,6 +29,7 @@ export type ReactSyntheticEvent = {|
   _dispatchListeners?: null | Array<Function> | Function,
   _reactName: string,
   _targetInst: Fiber,
+  nativeEvent: Event,
   type: string,
   currentTarget: null | EventTarget,
 |};
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
@@ -200,8 +200,8 @@ export function useFocus(
   const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
     {isFocused: false, isFocusVisible: false},
   );
-  const focusHandle = useEvent('focus', passiveObjectWithPriority);
-  const blurHandle = useEvent('blur', passiveObjectWithPriority);
+  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
+  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
   const focusVisibleHandles = useFocusVisibleInputHandles();
 
   useLayoutEffect(() => {
@@ -297,8 +297,8 @@ export function useFocusWithin<T>(
   const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
     {isFocused: false, isFocusVisible: false},
   );
-  const focusHandle = useEvent('focus', passiveObjectWithPriority);
-  const blurHandle = useEvent('blur', passiveObjectWithPriority);
+  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
+  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
   const afterBlurHandle = useEvent('afterblur', passiveObject);
   const beforeBlurHandle = useEvent('beforeblur', passiveObject);
   const focusVisibleHandles = useFocusVisibleInputHandles();

diff --git a/...react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js b/...react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
@@ -91,7 +91,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
         useFocus(ref, {
           onBlur,
         });
-        return <div ref={ref} onBlur={() => {}} onFocus={() => {}} />;
+        return <div ref={ref} />;
       };
       ReactDOM.render(<Component />, container);
       Scheduler.unstable_flushAll();
@@ -119,7 +119,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
           onFocus,
         });
         return (
-          <div ref={ref} onFocus={() => {}}>
+          <div ref={ref}>
             <a ref={innerRef} />
           </div>
         );
@@ -158,7 +158,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
         });
         return (
           <div ref={ref}>
-            <div ref={innerRef} onBlur={() => {}} onFocus={() => {}} />
+            <div ref={innerRef} />
           </div>
         );
       };
@@ -201,7 +201,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
           onFocusVisibleChange,
         });
         return (
-          <div ref={ref} onBlur={() => {}} onFocus={() => {}}>
+          <div ref={ref}>
             <div ref={innerRef} />
           </div>
         );
@@ -295,7 +295,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
           onFocusChange: createEventHandler('outer: onFocusChange'),
         });
         return (
-          <div ref={outerRef} onBlur={() => {}} onFocus={() => {}}>
+          <div ref={outerRef}>
             <Inner />
           </div>
         );