From 0e984462d984cd7910ee85d0f5afd2c6efb29f01 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 8 Aug 2020 10:50:25 +0200
Subject: [PATCH] fix useFocus

---
 .../events/src/dom/create-event-handle/Focus.js      |  8 ++++----
 .../__tests__/useFocus-test.internal.js              | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

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
index 53e04c1ca846..bcac5e6d93c1 100644
--- 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('focusin', passiveObjectWithPriority);
-  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
+  const focusHandle = useEvent('focus', passiveObjectWithPriority);
+  const blurHandle = useEvent('blur', 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('focusin', passiveObjectWithPriority);
-  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
+  const focusHandle = useEvent('focus', passiveObjectWithPriority);
+  const blurHandle = useEvent('blur', passiveObjectWithPriority);
   const afterBlurHandle = useEvent('afterblur', passiveObject);
   const beforeBlurHandle = useEvent('beforeblur', passiveObject);
   const focusVisibleHandles = useFocusVisibleInputHandles();
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
index a2745cbe62c2..f3bae7717b8c 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
@@ -36,7 +36,7 @@ function initializeModules(hasPointerEvents) {
 const forcePointerEvents = true;
 const table = [[forcePointerEvents], [!forcePointerEvents]];
 
-describe.each(table)(`useFocus`, hasPointerEvents => {
+describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
   let container;
 
   beforeEach(() => {
@@ -91,7 +91,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         useFocus(ref, {
           onBlur,
         });
-        return <div ref={ref} />;
+        return <div ref={ref} onBlur={() => {}} onFocus={() => {}} />;
       };
       ReactDOM.render(<Component />, container);
       Scheduler.unstable_flushAll();
@@ -119,7 +119,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
           onFocus,
         });
         return (
-          <div ref={ref}>
+          <div ref={ref} onFocus={() => {}}>
             <a ref={innerRef} />
           </div>
         );
@@ -158,7 +158,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         });
         return (
           <div ref={ref}>
-            <div ref={innerRef} />
+            <div ref={innerRef} onBlur={() => {}} onFocus={() => {}} />
           </div>
         );
       };
@@ -201,7 +201,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
           onFocusVisibleChange,
         });
         return (
-          <div ref={ref}>
+          <div ref={ref} onBlur={() => {}} onFocus={() => {}}>
             <div ref={innerRef} />
           </div>
         );
@@ -295,7 +295,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
           onFocusChange: createEventHandler('outer: onFocusChange'),
         });
         return (
-          <div ref={outerRef}>
+          <div ref={outerRef} onBlur={() => {}} onFocus={() => {}}>
             <Inner />
           </div>
         );