feat: Keyboard shortcut handler by snowystinger · Pull Request #9929 · adobe/react-spectrum

snowystinger · 2026-04-15T08:28:14Z

Closes

Aiming to help us solve the issue of event leaks, this will allow us more fine grained control of what useKeyboard blocks/prevents default on in a more declarative way.

New behaviour is opt in through shortcuts in useKeyboard. This will preventDefault and stopPropagation if the associated function in the map returns true. Or it will let the event pass without altering it if false is returned. In addition, an object can be returned to alter that behaviour in whatever way necessary. Given that all key combinations are exclusive matches, this should make it more obvious what events are continuing or not.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

# Conflicts: # packages/react-aria/src/selection/useSelectableCollection.ts

rspbot · 2026-04-30T22:55:21Z

Build successful! 🎉

rspbot · 2026-05-01T05:59:00Z

Build successful! 🎉

rspbot · 2026-05-01T06:53:17Z

Build successful! 🎉

rspbot · 2026-05-01T07:33:10Z

Build successful! 🎉

snowystinger · 2026-05-04T05:00:38Z


  const isSelected = selectedKey === key;

-  let onKeyDown = (event) => {


This seems just designed to skip arrow down and up, i think it'd be better to do this in the keyboard delegate or just allow it, i'm not sure why we wouldn't, there could be vertical steplists and it's a nice non-rtl dependent set of keys.

Just removing it for now as it'd make debugging difficult anyways

rspbot · 2026-05-04T05:01:26Z

Build successful! 🎉

# Conflicts: # packages/react-aria-components/test/Calendar.test.js # packages/react-aria-components/test/RangeCalendar.test.tsx # packages/react-aria/src/actiongroup/useActionGroup.ts # packages/react-aria/src/calendar/useCalendarGrid.ts # packages/react-aria/src/color/useColorArea.ts # packages/react-aria/src/combobox/useComboBox.ts # packages/react-aria/src/datepicker/useDateField.ts # packages/react-aria/src/datepicker/useDateSegment.ts # packages/react-aria/src/interactions/useKeyboard.ts # packages/react-aria/src/menu/useMenuItem.ts # packages/react-aria/src/menu/useMenuTrigger.ts # packages/react-aria/src/menu/useSubmenuTrigger.ts # packages/react-aria/src/numberfield/useNumberField.ts # packages/react-aria/src/overlays/useOverlay.ts # packages/react-aria/src/radio/useRadioGroup.ts # packages/react-aria/src/searchfield/useSearchField.ts # packages/react-aria/src/select/useSelect.ts # packages/react-aria/src/selection/useSelectableCollection.ts # packages/react-aria/src/spinbutton/useSpinButton.ts # packages/react-aria/src/steplist/useStepListItem.ts # packages/react-aria/src/table/useTableColumnResize.ts # packages/react-aria/test/combobox/useComboBox.test.js

rspbot · 2026-05-14T20:50:24Z

Build successful! 🎉

snowystinger · 2026-05-14T21:18:19Z

+  'ctrl',
+  'control',
+  'meta',
+  'mod', // OS dependent - Cmd on Mac, Ctrl on Windows/Linux


different name? just CMD?

Leaving alone for the moment, needs more opinions

snowystinger · 2026-05-14T21:19:54Z

+        return;
+      }
+      shortcutHandler(e);
+      props.onKeyDown?.(e);


call first and allow users to cancel our behaviour?

Can't do it based on preventDefault, we break that too much right now. We could address that, but it'd make the PR harder.

It's also a little odd to use preventDefault to handle this, preventDefault for the browser works at any and every level, the event's default takes place after the bubble phase is complete. If someone preventing default on our actions wanted to do it at some other level, they couldn't. It must be on the same element as the handler that defined the action.

If we created a special (preventDefaultSelection/preventDefaultNavigation), would we do it individually per handler like that? or just a preventAnyRACDefault?

who has the final say on continue propagation?

Maybe it'd be better to expose shortcuts as a prop on everything using useKeyboard. We could merge the shortcut objects. Then we could merge the results and go with the most limited returns.
We could allow an extra property on shortcuts that specifies how the merge should occur, so people could completely prevent us from running by using the merge strategy "replace" or something like that?

import {MergeStrategySymbol} from 'wherever'; <Button shortcuts={{ 'Enter': (e) => { console.log('just doing my own thing'); return {preventDefault: true, continuePropagation: false}; }, [MergeStrategySymbol]: 'replace' }} onPress={() => console.log('pressed')} />Just click</Button>

// Pressing Enter just does the console log, none of our handlers run, so onPress console log never happens

import {MergeStrategySymbol} from 'wherever'; <Button shortcuts={{ 'Enter': (e) => { console.log('just doing my own thing'); return {preventDefault: true, continuePropagation: true}; }, [MergeStrategySymbol]: 'merge' }} onPress={() => console.log('pressed')} />Just click</Button>

// Pressing Enter calls their handler first, then our onPress is called. Even though they set continuePropagation to true, our handler sets it false, which is more restrictive and we don't continue propagation

snowystinger · 2026-05-14T21:22:37Z

+    let action = map.get(canonical);
+    let result = action?.(e);
+    if (typeof result === 'boolean') {
+      result = {shouldContinuePropagation: !result, shouldPreventDefault: result};


allow return type of void to behave like return true?

I don't love this, it's too easy to forget to return something and returning true does a fair amount already, it stops propagation and prevents default. I think it's better to make a choice. Makes it easier to read the handlers as well, you can't just fall through to void/true accidentally

I'll change it though and see if others agree, can always undo it

returning true is what you want most of the time though right?

rspbot · 2026-05-19T07:14:25Z

Build successful! 🎉

rspbot · 2026-05-22T05:35:49Z

Build successful! 🎉

rspbot · 2026-05-26T06:30:24Z

Build successful! 🎉

rspbot · 2026-05-29T01:08:56Z

Build successful! 🎉

rspbot · 2026-05-29T01:08:58Z

## API Changes

@react-aria/interactions

/@react-aria/interactions:KeyboardProps

 KeyboardProps {
+  ignorePortalRef?: RefObject<Element | null> | null
   isDisabled?: boolean
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  shortcuts?: KeyboardShortcutBindings
 }

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

 Calendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: CalendarValueType<DateValue | null, CalendarSelectionMode>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (CalendarValueType<MappedDateValue<DateValue>, CalendarSelectionMode>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectionAlignment?: 'start' | 'center' | 'end' = 'center'
+  selectionMode?: CalendarSelectionMode = 'single'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: CalendarValueType<DateValue | null, CalendarSelectionMode>
   visibleMonths?: number = 1
+  weeksInMonth?: number
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:RangeCalendar

 RangeCalendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   commitBehavior?: 'clear' | 'reset' | 'select' = 'select'
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue, CalendarDate | null) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
+  weeksInMonth?: number
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumCalendarProps

 SpectrumCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: CalendarValueType<DateValue | null, CalendarSelectionMode>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (CalendarValueType<MappedDateValue<DateValue>, CalendarSelectionMode>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectionAlignment?: 'start' | 'center' | 'end' = 'center'
+  selectionMode?: CalendarSelectionMode = 'single'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: CalendarValueType<DateValue | null, CalendarSelectionMode>
   visibleMonths?: number = 1
+  weeksInMonth?: number
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumRangeCalendarProps

 SpectrumRangeCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   commitBehavior?: 'clear' | 'reset' | 'select' = 'select'
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue, CalendarDate | null) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
+  weeksInMonth?: number
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:DragAndDropOptions

 DragAndDropOptions <T = {}> {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate?: DropTargetDelegate
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>, Array<T>) => Array<DragItem> = () => []
   isDisabled?: boolean
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
   onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
   onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   renderDragPreview?: (Array<DragItem>) => JSX.Element | {
     element: JSX.Element
   x: number
   y: number
 }
+  renderDropIndicator?: (DropTarget) => JSX.Element
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
 }

rspbot · 2026-05-29T01:08:58Z

Agent Skills Changes

Modified (12)

react-aria/skills/react-aria/SKILL.md $\color{green}{+5}$ $\color{red}{-2}$
react-aria/skills/react-aria/references/guides/testing.md $\color{green}{+1}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/llms.txt $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/components/ListView.md $\color{green}{+3}$ $\color{red}{-2}$
s2/skills/react-spectrum-s2/references/components/TableView.md $\color{green}{+3}$ $\color{red}{-2}$
s2/skills/react-spectrum-s2/references/components/TreeView.md $\color{green}{+3}$ $\color{red}{-2}$
s2/skills/react-spectrum-s2/references/guides/dnd.md $\color{green}{+5}$ $\color{red}{-10}$
s2/skills/react-spectrum-s2/references/guides/test-utils-guidance.md $\color{green}{+4}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/guides/testing.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/llms.txt $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/guides/testing.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/llms.txt $\color{red}{-1}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/b8520b319b8917b20a444279a6d85ab743ae2353/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/b8520b319b8917b20a444279a6d85ab743ae2353/

devongovett · 2026-05-29T17:01:22Z

+  let {keyboardProps} = useKeyboard({
+    shortcuts: {
+      ArrowRight: e => {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {


what do you think about making this an option (maybe the default?) for useKeyboard? Seems like we do this in pretty much every keyboard handler...

devongovett · 2026-05-29T17:04:19Z

          state.setAnchorDate(null);
        }
-        break;
+        return false; // TODO: is this really correct? or should it return true when we cancel and only propagate if there's nothing to do


Should we return true inside the if statement? Was there a test that broke?

devongovett · 2026-05-29T17:16:29Z

+  'shift',
+  'alt',
+  'ctrl',
+  'control',


are control and ctrl different? should we standardize on one? I believe the standard e.key is Control

devongovett · 2026-05-29T17:24:18Z

+  /** Keyboard shortcuts to handle. */
+  shortcuts?: KeyboardShortcutBindings;
+  /** A ref to the element to ignore portal events. */
+  ignorePortalRef?: RefObject<Element | null> | null;


Oh I see you do have kind of an option for this? But is a ref necessary? Why not use e.target and e.currentTarget?

devongovett · 2026-05-29T17:44:53Z

-          // to the newly opened submenu's first item.
+    shortcuts: {
+      ' ': e => {
+        if (e.repeat) {


Maybe skipping repeated keys should also be an option (the default)?

devongovett · 2026-05-29T17:48:49Z

+  let {keyboardProps} = useKeyboard({
+    shortcuts: {
+      Escape: e => {
+        if (!isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {


Ignoring composing events by default might also be a good default? We have been inconsistent in our handling of these things...

devongovett · 2026-05-29T17:53:24Z

+    isDisabled: isDisabled || isReadOnly,
+    shortcuts: {
+      Enter: () => {
+        if (isDisabled || isReadOnly) {


Is this necessary if isDisabled is passed into useKeyboard as an option? Will the handler get called in that case?

devongovett · 2026-05-29T18:07:21Z


  const isSelected = selectedKey === key;

-  let onKeyDown = event => {


snowystinger and others added 4 commits March 18, 2026 18:23

prototype

30f302e

Change over all useSelectableCollection to use the new shortcuts syntax

a564b71

try making object more readable

a891c1e

share types

cafa642

github-actions Bot added the RAC label Apr 15, 2026

snowystinger changed the title ~~Keyboard shortcut handler~~ [WIP]: Keyboard shortcut handler Apr 15, 2026

snowystinger added 3 commits April 30, 2026 15:20

simplify and add tests, move to interactions. fix outstanding bug

44e5de7

Merge branch 'main' into keyboard-shortcut-handler

f29a6ec

# Conflicts: # packages/react-aria/src/selection/useSelectableCollection.ts

fix react 16 tests

03bfab7

Starting converting everything to use shortcuts

8791d64

github-actions Bot added the S2 label May 1, 2026

snowystinger added 3 commits May 1, 2026 15:36

fix all of the lint

a0a257f

fix: calendar tests

07e8ea6

Merge branch 'main' into keyboard-shortcut-handler

17ed6c6

snowystinger added 4 commits May 1, 2026 16:09

convert calendar and date picker

20c5c3d

actiongroup and datesegment and lint

276e625

simplify code

ed6fd4b

fix lint

43f94ff

snowystinger marked this pull request as ready for review May 1, 2026 06:37

fix ts that I don't think i broke

14cc456

add combobox

fcbf35c

snowystinger added 2 commits May 4, 2026 13:02

simplify some code

8cdc93e

fix lint

0990e4e

snowystinger commented May 4, 2026

View reviewed changes

snowystinger changed the title ~~[WIP]: Keyboard shortcut handler~~ feat: Keyboard shortcut handler May 4, 2026

snowystinger added the ready for review label May 7, 2026

github-actions Bot added the ActionBar label May 14, 2026

snowystinger commented May 14, 2026

View reviewed changes

Merge branch 'main' into keyboard-shortcut-handler

86caca9

Remove "Sel" expansion

8e99c00

snowystinger added 3 commits May 22, 2026 15:57

change to void return

59ed398

Merge branch 'main' into keyboard-shortcut-handler

90490c4

fix ts

ae94254

update everything to the void signature

b8520b3

github-actions Bot removed the RAC label May 29, 2026

devongovett approved these changes May 29, 2026

View reviewed changes


		const isSelected = selectedKey === key;

		let onKeyDown = (event) => {


		const isSelected = selectedKey === key;

		let onKeyDown = event => {

Conversation

snowystinger commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Apr 30, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented May 4, 2026

Uh oh!

rspbot commented May 14, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented May 19, 2026

Uh oh!

rspbot commented May 22, 2026

Uh oh!

rspbot commented May 26, 2026

Uh oh!

rspbot commented May 29, 2026

Uh oh!

rspbot commented May 29, 2026

@react-aria/interactions

/@react-aria/interactions:KeyboardProps

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

/@react-spectrum/calendar:RangeCalendar

/@react-spectrum/calendar:SpectrumCalendarProps

/@react-spectrum/calendar:SpectrumRangeCalendarProps

@react-spectrum/s2

/@react-spectrum/s2:DragAndDropOptions

Uh oh!

rspbot commented May 29, 2026

Agent Skills Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

snowystinger commented Apr 15, 2026 •

edited

Loading

snowystinger May 22, 2026 •

edited

Loading

snowystinger May 22, 2026 •

edited

Loading