fix: route user keyboard handlers through useKeyboard in useMenu, useDateField, useDatePicker, useDateRangePicker

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<T extends DateValue>
@@ -116,6 +117,11 @@ export function useDateField<T extends DateValue>(
     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<T extends DateValue>(
         focusManager.focusFirst();
       }
     },
-    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {
-      onKeyDown: props.onKeyDown,
-      onKeyUp: props.onKeyUp,
+    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, keyboardProps, {
       style: {
         unicodeBidi: 'isolate'
       }

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<T extends DateValue>(
     }
   });
 
+  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<T extends DateValue>(
           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: {

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<T extends DateValue>(
   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<T extends DateValue>(
           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: {

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<T> extends CollectionBase<T>, MultipleSelection {
@@ -84,6 +85,7 @@ export function useMenu<T>(
   ref: RefObject<HTMLElement | null>
 ): 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<T>(
   });
 
   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);
         }
       }
-    )
+    })
   };
 }