Skip to content

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

Merged
merged 11 commits into from
Feb 1, 2022

Conversation

siddharthkp
Copy link
Member

@siddharthkp siddharthkp commented Jan 19, 2022

Checklist:

  • Created new hook
  • Updated ActionMenu2 to use hook
  • Updated DropdownMenu2 to use hook
  • Added tests for hook

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.

@changeset-bot
Copy link

changeset-bot bot commented Jan 19, 2022

🦋 Changeset detected

Latest commit: b863987

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

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

@siddharthkp siddharthkp self-assigned this Jan 27, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jan 27, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 61.34 KB (+0.01% 🔺)
dist/browser.umd.js 61.72 KB (+0.01% 🔺)

@siddharthkp siddharthkp marked this pull request as ready for review January 28, 2022 15:25
@siddharthkp siddharthkp requested a review from a team January 28, 2022 15:25
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())
Copy link
Member Author

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.

@siddharthkp siddharthkp changed the title ActionMenu: Add menu focus hook ActionMenu2 + DropdownMenu2: Initial focus is based on key used to open menu Jan 28, 2022
@siddharthkp siddharthkp added this to the FY22 - Q3 milestone Jan 28, 2022
Copy link
Contributor

@colebemis colebemis left a 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 🌟

@siddharthkp siddharthkp merged commit 35ad708 into main Feb 1, 2022
@siddharthkp siddharthkp deleted the siddharth/use-menu-focus branch February 1, 2022 13:01
@primer-css primer-css mentioned this pull request Feb 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants