-
Notifications
You must be signed in to change notification settings - Fork 616
ActionMenu2 + DropdownMenu2: Initial focus is based on key used to open menu #1810
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🦋 Changeset detectedLatest commit: b863987 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
src/hooks/useMenuFocus.ts
Outdated
if (['ArrowDown', 'Space', 'Enter'].includes(openingKey)) { | ||
const firstElement = iterable.next().value | ||
/** We push imperative focus to the next tick to prevent React's batching */ | ||
setTimeout(() => firstElement?.focus()) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As the comment suggests, we push this to next tick so that the menu has opened.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great 👍
Tested in Storybook and everything seems to work 🌟
Checklist:
Notes for reviewer: Would have been really cool to use
focusInStrategy
in@primer/behaviors/focusZone
but unfortunately that only kicks once the focus zone (overlay in this case) is open and initialised; And because of that, it doesn't have the information about the trigger keyboard event. To make that happen, we would need to rewire how AnchoredOverlay works, so that it can attach listeners even when it's closed. I didn't feel super confident about doing that, so create a separate hook that only cares about initial focus.