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( {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( const stateRef = useRef( {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
; + return
{}} onFocus={() => {}} />; }; ReactDOM.render(, container); Scheduler.unstable_flushAll(); @@ -119,7 +119,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => { onFocus, }); return ( -