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

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

Hide file tree

Showing 3 changed files with 6 additions and 5 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();