feat: add onKeyDown prop to ListBoxItem for custom keyboard handling
#9181
Conversation
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
hasegawa-101
changed the title
onKeyDown prop to ListBoxItem for custom keyboard handlingonKeyDown prop to ListBoxItem for custom keyboard handling
Member
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
Thanks for starting this, would you mind removing the docs and storybook in favour of a unit test? it can be added just after this describe block
|
|
||
| The `<ListBoxItem>` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). As with other React Aria components that support links, this works via the <TypeLink links={docs.links} type={docs.exports.RouterProvider} /> component at the root of your app. See the [client side routing guide](routing.html) to learn how to set this up. | ||
|
|
||
| ## Custom keyboard handling |
Member
There was a problem hiding this comment.
No need to document this, it'll be in the props table and is a pretty common pattern
Author
|
Thanks for the review! I've addressed your feedback. Please take another look. |
Contributor
|
This should be using |
| let {getAllByRole} = renderListbox({}, {onKeyDown}); | ||
| let options = getAllByRole('option'); | ||
|
|
||
| fireEvent.keyDown(options[0], {key: 'Delete'}); |
Member
There was a problem hiding this comment.
Suggested change
| fireEvent.keyDown(options[0], {key: 'Delete'}); | |
| await user.tab(); | |
| await user.keyboard('ArrowDown'); |
hasegawa-101
force-pushed
the
issue-8732
branch
from
e7356f7 to
81ccc92
Compare
Author
|
Fixed! I've updated the test to use userEvent.keyboard() instead of fireEvent.keyDown() to prevent event leaking 🙏 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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 #8732
Added
onKeyDownprop toListBoxItemto support custom keyboard event handling for individual items,enabling features like deleting items with Delete/Backspace keys.
✅ Pull Request Checklist:
Issue.
Practices
📝 Test Instructions:
yarn start🧢 Your Project:
Open source contribution