fix(menu-item): bugs with disabled state by olihf-dematic · Pull Request #21340 · carbon-design-system/carbon

olihf-dematic · 2026-01-21T12:58:32Z

Closes #21337

Fixes styling on disabled menu-item.
Fixes menu closing when clicking disabled menu-item

Changelog

New

N/A

Changed

Changed how pointer: not allowed is applied to disabled menu-items
Updated click handling of menu-item to not dispatch event if clicked item is disabled
Updated menu-button to ensure it uses the correct event handler for menu-items, preventing it from closing when clicking any menu-item

Removed

N/A

Testing / Reviewing

Take the storybook example for menu-button
Verify the disabled entry shows the not allowed cursor, no matter where you hover over the menu-item
Click the disabled entry, verify the menu does not close

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

More details can be found in the pull request guide

netlify · 2026-01-21T13:04:33Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`5a009d3`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6970cd7c76721a0008c5ff1a
😎 Deploy Preview	https://deploy-preview-21340--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-01-21T13:05:28Z

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

Name	Link
🔨 Latest commit	`5a009d3`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6970cd7c872e91000884ebed
😎 Deploy Preview	https://deploy-preview-21340--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-01-21T13:06:03Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`5a009d3`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6970cd7ca0a0260008e9eb2c
😎 Deploy Preview	https://deploy-preview-21340--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-01-21T13:10:43Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`467b821`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69f1cb4f4d87ac00086f1969
😎 Deploy Preview	https://deploy-preview-21340--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-01-21T13:11:16Z

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

Name	Link
🔨 Latest commit	`467b821`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69f1cb4f69cd61000831b513
😎 Deploy Preview	https://deploy-preview-21340--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-01-21T13:13:56Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`415612a`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6971f362db23e90008a820f0
😎 Deploy Preview	https://deploy-preview-21340--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

codecov · 2026-01-21T13:14:46Z

Codecov Report

❌ Patch coverage is 86.66667% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.07%. Comparing base (585f191) to head (467b821).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/react/src/components/Menu/MenuItem.tsx	66.66%	1 Missing ⚠️
...es/web-components/src/components/menu/menu-item.ts	90.90%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21340      +/-   ##
==========================================
- Coverage   95.10%   95.07%   -0.03%     
==========================================
  Files         541      541              
  Lines       45179    45192      +13     
  Branches     6537     6482      -55     
==========================================
- Hits        42966    42965       -1     
- Misses       2084     2098      +14     
  Partials      129      129

Flag	Coverage Δ
main-packages	`89.15% <66.66%> (-0.01%)`	⬇️
web-components	`97.87% <91.66%> (-0.02%)`	⬇️

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.

emyarod

looks good, clicking the disabled menu item no longer closes the menu
just want to confirm with @carbon-design-system/design about the focus outline still being applied to the disabled item

Kritvi-bhatia17

looks good, clicking the disabled menu item no longer closes the menu just want to confirm with @carbon-design-system/design about the focus outline still being applied to the disabled item

Hi @olihf-dematic, great work! However the focus shouldn't be on the disabled state.

Rory-McDonald · 2026-02-12T10:53:09Z

@emyarod FYI I also noticed the issue about the focus border showing on the disabled state is also happening in the react storybook.

emyarod · 2026-02-12T18:33:08Z

@Rory-McDonald thanks for the info! I think we can open a separate ticket for that then

@Kritvi-bhatia17 would this PR be ok to merge if the disabled state focus outline is resolved separately?

Kritvi-bhatia17 · 2026-02-16T10:23:21Z

@Rory-McDonald thanks for the info! I think we can open a separate ticket for that then

@Kritvi-bhatia17 would this PR be ok to merge if the disabled state focus outline is resolved separately?

@emyarod It would be ideal to address the disabled‑state focus outline issue within this PR since it affects a11y. However, if the fix is broader in scope and will require more time, feel free to make the call.

olihf-dematic · 2026-02-18T15:33:46Z

I don't mind either approach, I noticed when working on it that it was a bit odd to still have the focus. However as it was the same as react I didn't touch it. If it should be done in the same ticket, just let me know and I'll crack on!

olihf-dematic · 2026-03-17T11:24:14Z

Hi @emyarod I've updated this MR to solve the focus issue on React and WC

olihf-dematic · 2026-03-19T15:56:25Z

@Kritvi-bhatia17 Just highlighting the above

Kritvi-bhatia17

Thank you so much for working on this @olihf-dematic! LGTM visually 🚀

emyarod

looks good to me!

olihf-dematic requested a review from a team as a code owner January 21, 2026 12:58

olihf-dematic requested review from emyarod and riddhybansal January 21, 2026 12:58

olihf-dematic deployed to @carbon/react storybook preview January 21, 2026 13:15 — with GitHub Actions View deployment

olihf-dematic changed the title ~~Menu item fix~~ fix(menu-item) Jan 22, 2026

olihf-dematic changed the title ~~fix(menu-item)~~ fix(menu-item): bugs with disabled state Jan 22, 2026

olihf-dematic force-pushed the menu-item-fix branch from 121f551 to 415612a Compare January 22, 2026 09:52

olihf-dematic deployed to @carbon/react storybook preview January 22, 2026 10:04 — with GitHub Actions View deployment

olihf-dematic force-pushed the menu-item-fix branch from 415612a to 795ebd8 Compare February 2, 2026 14:24

olihf-dematic deployed to @carbon/react storybook preview February 2, 2026 14:35 — with GitHub Actions View deployment

emyarod reviewed Feb 4, 2026

View reviewed changes

emyarod added the status: visual review 🔍 label Feb 4, 2026

emyarod requested review from a team and Rory-McDonald and removed request for a team February 4, 2026 21:57

Kritvi-bhatia17 requested changes Feb 12, 2026

View reviewed changes

olihf-dematic added 3 commits March 17, 2026 11:23

fix(menu-item): cursor not allowed, only shows on parts of the menu-item

102f578

fix(menu-item): do not dispatch close event if entry clicked is disabled

0f67524

fix(menu-button): prevent closing menu on click regardless of state

e4be2e8

fix(menu-tem): prevent mouse focus onto disabled items

e38d052

olihf-dematic force-pushed the menu-item-fix branch from fd3e5bb to e38d052 Compare March 17, 2026 11:23

olihf-dematic deployed to @carbon/react storybook preview March 17, 2026 11:35 — with GitHub Actions View deployment

Kritvi-bhatia17 approved these changes Mar 27, 2026

View reviewed changes

Kritvi-bhatia17 requested a review from emyarod March 27, 2026 14:37

Kritvi-bhatia17 added status: one more review 👀 and removed status: visual review 🔍 labels Mar 27, 2026

emyarod approved these changes Apr 14, 2026

View reviewed changes

tay1orjones approved these changes Apr 28, 2026

View reviewed changes

tay1orjones removed the status: one more review 👀 label Apr 28, 2026

tay1orjones added this pull request to the merge queue Apr 28, 2026

tay1orjones added the status: ready to merge 🎉 label Apr 28, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Apr 28, 2026

Merge branch 'main' into menu-item-fix

467b821

Kritvi-bhatia17 deployed to @carbon/react storybook preview April 29, 2026 09:24 — with GitHub Actions View deployment

heloiselui added this pull request to the merge queue Apr 29, 2026

Merged via the queue into carbon-design-system:main with commit bf130cb Apr 29, 2026
39 checks passed

Conversation

olihf-dematic commented Jan 21, 2026

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

netlify Bot commented Jan 21, 2026

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Jan 21, 2026

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

Uh oh!

netlify Bot commented Jan 21, 2026

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify Bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

netlify Bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carbon-elements ready!

Uh oh!

codecov Bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

emyarod left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kritvi-bhatia17 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rory-McDonald commented Feb 12, 2026

Uh oh!

emyarod commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kritvi-bhatia17 commented Feb 16, 2026

Uh oh!

olihf-dematic commented Feb 18, 2026

Uh oh!

olihf-dematic commented Mar 17, 2026

Uh oh!

olihf-dematic commented Mar 19, 2026

Uh oh!

Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

Uh oh!

emyarod left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

netlify Bot commented Jan 21, 2026 •

edited

Loading

netlify Bot commented Jan 21, 2026 •

edited

Loading

netlify Bot commented Jan 21, 2026 •

edited

Loading

codecov Bot commented Jan 21, 2026 •

edited

Loading

emyarod left a comment •

edited

Loading

Kritvi-bhatia17 left a comment •

edited

Loading

emyarod commented Feb 12, 2026 •

edited

Loading