feat: Keyboard shortcut handler#9929
Open
snowystinger wants to merge 23 commits into
Open
Conversation
snowystinger
changed the title
# Conflicts: # packages/react-aria/src/selection/useSelectableCollection.ts
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
commented
May 4, 2026
|
|
||
| const isSelected = selectedKey === key; | ||
|
|
||
| let onKeyDown = (event) => { |
Member
Author
There was a problem hiding this comment.
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
|
Build successful! 🎉 |
snowystinger
changed the title
# 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
|
Build successful! 🎉 |
snowystinger
commented
May 14, 2026
| 'ctrl', | ||
| 'control', | ||
| 'meta', | ||
| 'mod', // OS dependent - Cmd on Mac, Ctrl on Windows/Linux |
Member
Author
There was a problem hiding this comment.
different name? just CMD?
Member
Author
There was a problem hiding this comment.
Leaving alone for the moment, needs more opinions
| return; | ||
| } | ||
| shortcutHandler(e); | ||
| props.onKeyDown?.(e); |
Member
Author
There was a problem hiding this comment.
call first and allow users to cancel our behaviour?
Member
Author
There was a problem hiding this comment.
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
| let action = map.get(canonical); | ||
| let result = action?.(e); | ||
| if (typeof result === 'boolean') { | ||
| result = {shouldContinuePropagation: !result, shouldPreventDefault: result}; |
Member
Author
There was a problem hiding this comment.
allow return type of void to behave like return true?
Member
Author
There was a problem hiding this comment.
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
|
Build successful! 🎉 |
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:GridListItemRenderProps GridListItemRenderProps {
allowsDragging?: boolean
id?: Key
isDisabled: boolean
isDragging?: boolean
isDropTarget?: boolean
isFocusVisible: boolean
- isFocusVisibleWithin: boolean
isFocused: boolean
isHovered: boolean
isPressed: boolean
isSelected: boolean
selectionMode: SelectionMode
state: ListState<unknown>
}/react-aria-components:CellRenderProps CellRenderProps {
columnIndex?: number | null
hasChildItems: boolean
id?: Key
isDisabled: boolean
isExpanded: boolean
isFocusVisible: boolean
- isFocusVisibleWithinRow: boolean
isFocused: boolean
isHovered: boolean
isPressed: boolean
isSelected: boolean
level: number
}@react-aria/interactions/@react-aria/interactions:KeyboardProps KeyboardProps {
+ ignorePortalRef?: RefObject<Element | null> | null
isDisabled?: boolean
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
+ shortcuts?: KeyboardShortcutBindings
} |
Agent Skills ChangesRemoved (117)
Modified (145)
InstallReact Spectrum S2: React Aria: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
shortcutsinuseKeyboard. 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:
📝 Test Instructions:
🧢 Your Project: