From 6bc1b650550d51495b79364c4af946d1af3aec70 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 9 Oct 2026 07:29:24 +1100 Subject: [PATCH] =?UTF-8?q?Revert=20"Revert=20"fix:=20route=20user=20keybo?= =?UTF-8?q?ard=20handlers=20through=20useKeyboard=20in=20useM=E2=80=A6"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit f8770fbd1f6649e9bad41eef9549ea25dd40ca49. --- .../react-aria/src/datepicker/useDateField.ts | 10 ++++++--- .../src/datepicker/useDatePicker.ts | 14 +++++++----- .../src/datepicker/useDateRangePicker.ts | 14 +++++++----- packages/react-aria/src/menu/useMenu.ts | 22 +++++++++---------- 4 files changed, 33 insertions(+), 27 deletions(-) diff --git a/packages/react-aria/src/datepicker/useDateField.ts b/packages/react-aria/src/datepicker/useDateField.ts index 00ecdeabcea..94e4d0d31e1 100644 --- a/packages/react-aria/src/datepicker/useDateField.ts +++ b/packages/react-aria/src/datepicker/useDateField.ts @@ -32,6 +32,7 @@ import {useField} from '../label/useField'; import {useFocusWithin} from '../interactions/useFocusWithin'; import {useFormReset} from '../utils/useFormReset'; import {useFormValidation} from '../form/useFormValidation'; +import {useKeyboard} from '../interactions/useKeyboard'; import {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter'; export interface AriaDateFieldProps @@ -116,6 +117,11 @@ export function useDateField( onFocusWithinChange: props.onFocusChange }); + let {keyboardProps} = useKeyboard({ + onKeyDown: props.onKeyDown, + onKeyUp: props.onKeyUp + }); + let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker'); let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription'; @@ -212,9 +218,7 @@ export function useDateField( focusManager.focusFirst(); } }, - fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, { - onKeyDown: props.onKeyDown, - onKeyUp: props.onKeyUp, + fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, keyboardProps, { style: { unicodeBidi: 'isolate' } diff --git a/packages/react-aria/src/datepicker/useDatePicker.ts b/packages/react-aria/src/datepicker/useDatePicker.ts index f5beb4bb533..85ef09cb27a 100644 --- a/packages/react-aria/src/datepicker/useDatePicker.ts +++ b/packages/react-aria/src/datepicker/useDatePicker.ts @@ -36,6 +36,7 @@ import {useDescription} from '../utils/useDescription'; import {useField} from '../label/useField'; import {useFocusWithin} from '../interactions/useFocusWithin'; import {useId} from '../utils/useId'; +import {useKeyboard} from '../interactions/useKeyboard'; import {useLocale} from '../i18n/I18nProvider'; import {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter'; import {useMemo, useRef} from 'react'; @@ -127,6 +128,11 @@ export function useDatePicker( } }); + let {keyboardProps} = useKeyboard({ + onKeyDown: props.onKeyDown, + onKeyUp: props.onKeyUp + }); + return { groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, { role: 'group' as const, @@ -138,18 +144,14 @@ export function useDatePicker( return; } - if (props.onKeyDown) { - props.onKeyDown(e); - } + keyboardProps.onKeyDown?.(e); }, onKeyUp(e: KeyboardEvent) { if (state.isOpen) { return; } - if (props.onKeyUp) { - props.onKeyUp(e); - } + keyboardProps.onKeyUp?.(e); } }), labelProps: { diff --git a/packages/react-aria/src/datepicker/useDateRangePicker.ts b/packages/react-aria/src/datepicker/useDateRangePicker.ts index 29d7833c254..d9469adaca7 100644 --- a/packages/react-aria/src/datepicker/useDateRangePicker.ts +++ b/packages/react-aria/src/datepicker/useDateRangePicker.ts @@ -46,6 +46,7 @@ import {useDescription} from '../utils/useDescription'; import {useField} from '../label/useField'; import {useFocusWithin} from '../interactions/useFocusWithin'; import {useId} from '../utils/useId'; +import {useKeyboard} from '../interactions/useKeyboard'; import {useLocale} from '../i18n/I18nProvider'; import {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter'; import {useMemo, useRef} from 'react'; @@ -174,6 +175,11 @@ export function useDateRangePicker( let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT); let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT); + let {keyboardProps} = useKeyboard({ + onKeyDown: props.onKeyDown, + onKeyUp: props.onKeyUp + }); + return { groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, { role: 'group' as const, @@ -184,18 +190,14 @@ export function useDateRangePicker( return; } - if (props.onKeyDown) { - props.onKeyDown(e); - } + keyboardProps.onKeyDown?.(e); }, onKeyUp(e: KeyboardEvent) { if (state.isOpen) { return; } - if (props.onKeyUp) { - props.onKeyUp(e); - } + keyboardProps.onKeyUp?.(e); } }), labelProps: { diff --git a/packages/react-aria/src/menu/useMenu.ts b/packages/react-aria/src/menu/useMenu.ts index f95b9dd9dac..20cd1a687b2 100644 --- a/packages/react-aria/src/menu/useMenu.ts +++ b/packages/react-aria/src/menu/useMenu.ts @@ -26,6 +26,7 @@ import {filterDOMProps} from '../utils/filterDOMProps'; import {menuData} from './utils'; import {mergeProps} from '../utils/mergeProps'; import {TreeState} from 'react-stately/useTreeState'; +import {useKeyboard} from '../interactions/useKeyboard'; import {useSelectableList} from '../selection/useSelectableList'; export interface MenuProps extends CollectionBase, MultipleSelection { @@ -84,6 +85,7 @@ export function useMenu( ref: RefObject ): MenuAria { let {shouldFocusWrap = true, onKeyDown, onKeyUp, ...otherProps} = props; + let {keyboardProps} = useKeyboard({onKeyDown, onKeyUp}); if (!props['aria-label'] && !props['aria-labelledby'] && process.env.NODE_ENV !== 'production') { console.warn('An aria-label or aria-labelledby prop is required for accessibility.'); @@ -107,19 +109,15 @@ export function useMenu( }); return { - menuProps: mergeProps( - domProps, - {onKeyDown, onKeyUp}, - { - role: 'menu', - ...listProps, - onKeyDown: e => { - // don't clear the menu selected keys if the user is presses escape since escape closes the menu - if (e.key !== 'Escape' || props.shouldUseVirtualFocus) { - listProps.onKeyDown?.(e); - } + menuProps: mergeProps(domProps, keyboardProps, { + role: 'menu', + ...listProps, + onKeyDown: e => { + // don't clear the menu selected keys if the user is presses escape since escape closes the menu + if (e.key !== 'Escape' || props.shouldUseVirtualFocus) { + listProps.onKeyDown?.(e); } } - ) + }) }; }