fix(menu-item): bugs with disabled state (#21340)

olihf-dematic · Kritvi-bhatia17 · web-flow · commit bf130cb2763e · 2026-04-29T10:41:22.000Z
* fix(menu-item): cursor not allowed, only shows on parts of the menu-item

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

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

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

---------

Co-authored-by: Kritvi &lt;158570656+Kritvi-bhatia17@users.noreply.github.com&gt;
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
@@ -190,6 +190,12 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
     const keyboardClickEvent = (e: KeyboardEvent) =>
       match(e, keys.Enter) || match(e, keys.Space);
 
+    function handleMouseDown(e: MouseEvent<HTMLLIElement>) {
+      if (isDisabled) {
+        e.preventDefault();
+      }
+    }
+
     function handleKeyDown(e: KeyboardEvent<HTMLLIElement>) {
       if (hasChildren && match(e, keys.ArrowRight)) {
         openSubmenu();
@@ -268,6 +274,7 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
           aria-disabled={isDisabled ?? undefined}
           aria-haspopup={hasChildren ?? undefined}
           aria-expanded={hasChildren ? submenuOpen : undefined}
+          onMouseDown={handleMouseDown}
           onClick={handleClick}
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
diff --git a/packages/web-components/src/components/menu-button/menu-button.ts b/packages/web-components/src/components/menu-button/menu-button.ts
@@ -95,15 +95,14 @@ class CDSMenuButton extends HostListenerMixin(LitElement) {
       return;
     }
 
+    // Handle clicks on trigger only, other listeners handle clicks on menu items
     const path = event.composedPath();
     if (path.includes(trigger)) {
       if (this._open) {
         this._closeMenu({ restoreFocus: true });
       } else {
         this._open = true;
       }
-    } else if (this._open) {
-      this._closeMenu();
     }
   };
 
diff --git a/packages/web-components/src/components/menu/menu-item.scss b/packages/web-components/src/components/menu/menu-item.scss
@@ -71,11 +71,15 @@ $css--plex: true !default;
   display: var(--child-icon-property, none);
 }
 
-:host([aria-disabled='true']) * {
+:host([aria-disabled='true']) {
   color: $text-disabled;
   cursor: not-allowed;
 }
 
+:host([aria-disabled='true']) :where(*) {
+  color: inherit;
+}
+
 :host([aria-disabled='true']:hover),
 :host([aria-disabled='true'].#{$prefix}--menu-item--danger:hover) {
   background-color: $layer;
diff --git a/packages/web-components/src/components/menu/menu-item.ts b/packages/web-components/src/components/menu/menu-item.ts
@@ -188,6 +188,13 @@ class CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {
     this._handleClick(event);
   }
 
+  @HostListener('mousedown')
+  handleMouseDown(event: MouseEvent) {
+    if (this.disabled) {
+      event.preventDefault();
+    }
+  }
+
   @HostListener('mouseenter')
   handleMouseEnter() {
     if (this.hasSubmenu) {
@@ -263,6 +270,10 @@ class CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {
   }
 
   _handleClick = (e: MouseEvent | KeyboardEvent): void => {
+    if (this.disabled) {
+      return;
+    }
+
     if (this.hasSubmenu) {
       this._openSubmenu();
       return;

Original file line number	Diff line number	Diff line change
`@@ -95,15 +95,14 @@ class CDSMenuButton extends HostListenerMixin(LitElement) {`
`95`	`95`	`return;`
`96`	`96`	`}`
`97`	`97`
	`98`	`+ // Handle clicks on trigger only, other listeners handle clicks on menu items`
`98`	`99`	`const path = event.composedPath();`
`99`	`100`	`if (path.includes(trigger)) {`
`100`	`101`	`if (this._open) {`
`101`	`102`	`this._closeMenu({ restoreFocus: true });`
`102`	`103`	`} else {`
`103`	`104`	`this._open = true;`
`104`	`105`	`}`
`105`		`- } else if (this._open) {`
`106`		`- this._closeMenu();`
`107`	`106`	`}`
`108`	`107`	`};`
`109`	`108`