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:

One chain of events that was hard to track was submenutrigger Esc handling. Make sure to manually test this.

🧢 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! 🎉

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

Build successful! 🎉

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

Build successful! 🎉

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

Build successful! 🎉

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?

yeah, react-spectrum/test/datepicker/DateRangePicker.test.js:439:28

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

nope, same thing, happy to standardize

though, just food for thought, it's e.ctrlKey, not e.controlKey

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


  const isSelected = selectedKey === key;

-  let onKeyDown = event => {


Not sure why my comment is marked as changed/obsolete #9929 (comment)

rspbot · 2026-05-31T07:12:01Z

Build successful! 🎉

devongovett · 2026-06-01T16:13:14Z

-        break;
-      case 'Escape':
-        // TODO: can remove this when we fix collection event leaks
+        // TODO is this one covered by a test? did my changes to have a default stop on portals break this?


basically, need to test this one, manually to double check. Since unit tests are potentially inaccurate on this due to events having explicit targets and properties set by us. Make sure to open submenus in RAC and S2 and close multi level's with Esc. I didn't find any differences, but I'll move this to the description instead as part of testing.

snowystinger · 2026-06-03T19:25:12Z

~~Note to self, props.onKeyDown should be called first, otherwise it's only being called sometimes~~

Nevermind, it's only being skipped if it's through a portal, is a repeat that's not allowed or is a composing event that isn't allowed at the moment. The rest of the time it's called. So we can debate this some more.

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

rspbot · 2026-06-09T00:53:57Z

Build successful! 🎉

rspbot · 2026-06-09T01:05:56Z

Build successful! 🎉

rspbot · 2026-06-09T01:05:57Z

## API Changes

@react-aria/interactions

/@react-aria/interactions:KeyboardProps

 KeyboardProps {
+  allowComposing?: boolean
+  allowRepeats?: boolean
   isDisabled?: boolean
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  shortcuts?: KeyboardShortcutBindings
 }

reidbarber

Awesome!

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 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 previously approved these changes May 29, 2026

View reviewed changes

review comments

9a9a0c2

snowystinger dismissed devongovett’s stale review via 9a9a0c2 May 31, 2026 07:03

devongovett previously approved these changes Jun 1, 2026

View reviewed changes

Merge branch 'main' into keyboard-shortcut-handler

257b1c8

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

snowystinger dismissed devongovett’s stale review via 257b1c8 June 9, 2026 00:47

remove stale todo

73a0c69

reidbarber approved these changes Jun 9, 2026

View reviewed changes

devongovett approved these changes Jun 9, 2026

View reviewed changes

devongovett added this pull request to the merge queue Jun 9, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jun 9, 2026

devongovett added this pull request to the merge queue Jun 9, 2026

Merged via the queue into main with commit 9e1b070 Jun 9, 2026
31 checks passed

devongovett deleted the keyboard-shortcut-handler branch June 9, 2026 19:01

This was referenced Jun 11, 2026

Many events prevented when using useNumberField. #2803

Closed

ko-KR: Unable to set AM/PM in DatePicker #5832

Closed


		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 22, 2026

Uh oh!

rspbot commented May 26, 2026

Uh oh!

rspbot commented May 29, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented May 31, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

rspbot commented Jun 9, 2026

Uh oh!

rspbot commented Jun 9, 2026

Uh oh!

rspbot commented Jun 9, 2026

@react-aria/interactions

/@react-aria/interactions:KeyboardProps

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

snowystinger commented Apr 15, 2026 •

edited

Loading

snowystinger commented Jun 3, 2026 •

edited

Loading