Skip to content

fix(menu): prevent submenu blur from closing parent menu#22186

Merged
heloiselui merged 8 commits into
carbon-design-system:mainfrom
maradwan26:nested-menu-focusbehaviour-fix
May 15, 2026
Merged

fix(menu): prevent submenu blur from closing parent menu#22186
heloiselui merged 8 commits into
carbon-design-system:mainfrom
maradwan26:nested-menu-focusbehaviour-fix

Conversation

@maradwan26

@maradwan26 maradwan26 commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Closes #22143

Fixes an issue where hovering on a submenu, then blurring the submenu would close the entire menu, including the parent.

Changelog

Changed

  • Updated onOpenChange in MenuItem.tsx to return focus to its parent when it closes, similar to how its done in Web Components
    • When a submenu closes, the focus should return to its parent. The cause of this issue was due to focus going nowhere after the submenu closed, resulting in Menu treating is a blur of the entire menu and thus closing everything.
      • However, focus should return to parent only if the relatedTarget is not also a submenu, because in this case, the focus should go to the submenu, instead.

Testing / Reviewing

  • Go to "Menu Button/With Nested Menu` in React storybook
  • Hover over "Export As"
  • Submenu should open
  • Hover over anything else (empty space, a sibling of Export As, anything) to blur the submenu
  • The submenu should close, the parent menu should remain open, and "Export As" should be focused

Please feel free to pull down this branch and test a bunch of different menu configurations if there are any edge cases I'm missing. I tested this locally with nested submenus, as well as sibling submenus when directly stacked on top of each other and also when spread apart. (reason for 071702a, the page would crash otherwise)

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • [ ] Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

@maradwan26 maradwan26 requested a review from a team as a code owner May 5, 2026 18:37
@netlify

netlify Bot commented May 5, 2026

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 79300c0
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69fa38fed4d022000833b27c
😎 Deploy Preview https://deploy-preview-22186--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 5, 2026

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 79300c0
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69fa38fe996cf90008dab3c6
😎 Deploy Preview https://deploy-preview-22186--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 5, 2026

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9c66e7c
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69fa3911b5405200081380c8
😎 Deploy Preview https://deploy-preview-22186--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 5, 2026

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 9c66e7c
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69fa3911d1aebf00089fe797
😎 Deploy Preview https://deploy-preview-22186--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@maradwan26 maradwan26 marked this pull request as draft May 5, 2026 18:45
@netlify

netlify Bot commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit d3f7886
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a0623d514052e000880704c
😎 Deploy Preview https://deploy-preview-22186--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit d3f7886
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a0623d5bd99a40007df2836
😎 Deploy Preview https://deploy-preview-22186--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 92.85714% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 95.49%. Comparing base (13c5c42) to head (d3f7886).
⚠️ Report is 47 commits behind head on main.

Files with missing lines Patch % Lines
packages/react/src/components/Menu/MenuItem.tsx 92.85% 1 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #22186      +/-   ##
==========================================
+ Coverage   95.11%   95.49%   +0.37%     
==========================================
  Files         549      582      +33     
  Lines       45644    50334    +4690     
  Branches     6528     6751     +223     
==========================================
+ Hits        43413    48064    +4651     
- Misses       2101     2138      +37     
- Partials      130      132       +2
Flag Coverage Δ
main-packages 89.18% <92.85%> (+0.01%) ⬆️
web-components 98.07% <ø> (+0.16%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@maradwan26 maradwan26 marked this pull request as ready for review May 6, 2026 16:51
@netlify

netlify Bot commented May 6, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit d3f7886
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a0623d59490de0008bcf923
😎 Deploy Preview https://deploy-preview-22186--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

devadula-nandan
devadula-nandan approved these changes May 13, 2026
View reviewed changes

@devadula-nandan devadula-nandan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
can we bump this coverage?

❌ Patch coverage is 78.57143% with 3 lines in your changes missing coverage. Please review.

@maradwan26

maradwan26 commented May 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@devadula-nandan Increased coverage 👍 . Not sure why it's complaining about line 141, though, it doesn't show up as not covered in the ci itself.

Screenshot 2026-05-14 at 3 59 25 PM

heloiselui
heloiselui approved these changes May 15, 2026
View reviewed changes

@heloiselui heloiselui left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@heloiselui heloiselui added this pull request to the merge queue May 15, 2026
Merged via the queue into carbon-design-system:main with commit 420d0c2 May 15, 2026
40 checks passed
@maradwan26 maradwan26 deleted the nested-menu-focusbehaviour-fix branch May 15, 2026 15:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@devadula-nandan devadula-nandan devadula-nandan approved these changes

@heloiselui heloiselui heloiselui approved these changes

@emyarod emyarod Awaiting requested review from emyarod emyarod is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

Assignees

No one assigned

Labels

status: ready to merge 🎉

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: Nested Menu closes unexpectedly when hovering from submenu item to a parent menu item

3 participants

@maradwan26 @devadula-nandan @heloiselui