fix(react): uishell headermenu blur handler #14616
Merged
Conversation
This file contains 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
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Hey @tw15egan, just noticed @andreancardona is on vacation this week. Is there some way I can request a review from someone else? I'm kind of eager to incorporate this change into my project, and I don't want to miss a version update. Thanks! |
andreancardona
approved these changes
Sep 12, 2023
There was a problem hiding this comment.
Just took a quick look thank you for the contribution @cordesmj !
andreancardona
added
status: ready to merge 🎉
and removed
status: ready for review 👀
status: one more review 👀
labels
github-merge-queue
bot
removed this pull request from the merge queue due to no response for status checks
Thank you so much, Andrea! Didn't mean to disturb your vacation 🤦 |
Merged
via the queue into
carbon-design-system:main
with commit Sep 12, 2023
7d95369
18 checks passed
misiekhardcore
pushed a commit
to misiekhardcore/carbon
that referenced
this pull request
Sep 18, 2023
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
misiekhardcore
pushed a commit
to misiekhardcore/carbon
that referenced
this pull request
Sep 18, 2023
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
github-merge-queue bot
pushed a commit
that referenced
this pull request
Sep 20, 2023
* refactor(ComboBox): improve TS types * chore(ComboBox): fix file formatting * fix(react): uishell headermenu blur handler (#14616) Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> * fix: add isSelected prop to IconButton (#14600) * fix: add isSelected prop to IconButton * fix: update snapshot * fix: change the HeaderMenuItem so it show docs in storybook (#14617) Co-authored-by: TJ Egan <tw15egan@gmail.com> * fix(contributors): remove duplicate contributors * test(snapshot): update snapshots --------- Co-authored-by: cordesmj <cordesmj@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: Aziz Chebbi <60013060+azizChebbi@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 #14614
This PR modifies the HeaderMenu React component (part of the UIShell) such that when the menu loses focus, the menu is closed.
Changelog
Changed
HeaderMenuchanged so that when the menu loses focus the menu is closed, unless focus is going to a child menu.Testing / Reviewing
A basic test can be done on the storybook, as described in the referenced issue. That is, with this change, when tabbing through the submenu under "Link 4" in the storybook, upon pressing the Tab key from "Sub-link 3", focus passes to a link in the page content and the menu should close.
A more significant test can be done by adding a sub-submenu to the submenu. For example, in
packages/react/src/components/UIShell/UIShell.HeaderBase.stories.js, after line 200, one could add the following:Tabbing around the menus should result in menus closing when losing focus, except when tabbing or clicking into child menus.
This will also facilitate extending the
HeaderMenuto support a second level 'flyout' with the desired blur behavior.