[context menu] Fix disabled prop not working

[arturbien]

Summary

The disabled prop on ContextMenu.Root was not preventing the context menu from opening.
When opened with disabled prop the context menu would completely block the page and could not be closed with clicks outside or ESC key.

Here's a recording of the issue:

Screen.Recording.2026-01-21.at.11.04.57.mov

This PR fixes the issue by checking the disabled state in ContextMenuTrigger before opening the menu:

Screen.Recording.2026-01-21.at.16.02.21.mov

Changes

• Fix: Check for disabled state in ContextMenuTrigger before opening on right-click (handleContextMenu) and long press (handleTouchStart)
• Tests: Added tests for the disabled prop covering both right-click and long press (touch) interactions
• Demo: Added a "Disabled Context Menu" demo to the experiments page

Test plan

• Verify right-clicking the trigger does not open the menu when disabled={true}
• Verify long press on touch devices does not open the menu when disabled={true}
• Verify onOpenChange is not called when the menu is disabled
• Verify the native context menu opens when disabled context-menu component is clicked
• Existing tests still pass (pnpm test:jsdom ContextMenu)
• I have followed (at least) the PR section of the contributing guide.

[pkg-pr-new]

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3806
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3806
  

commit: f167183

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	f167183
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6971538b9936510008fcaf2e
😎 Deploy Preview	https://deploy-preview-3806--base-ui.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.

[greptile-apps]

Greptile Summary

Fixed ContextMenu.Root disabled prop by adding early return checks in ContextMenuTrigger's handleContextMenu and handleTouchStart handlers. The fix prevents the menu from opening on right-click or long press when disabled.

• Added disabled state check in handleContextMenu (right-click handler) and handleTouchStart (long press handler)
• Tests verify disabled prop blocks menu opening and prevents onOpenChange calls
• Demo added to experiments page for manual testing

Issue found: The handleDocumentContextMenu effect still prevents native context menu from appearing when disabled. When the component is disabled, users would typically expect the browser's native context menu to work normally.

Confidence Score: 3/5

• Safe to merge with one logical issue that affects UX when disabled
• The core fix correctly prevents the menu from opening when disabled, and tests are comprehensive. However, the native context menu is still blocked when the component is disabled, which affects expected behavior.
• Pay attention to packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx - the handleDocumentContextMenu effect needs updating

Important Files Changed

Filename	Overview
packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx	Added disabled checks in handleContextMenu and handleTouchStart to prevent menu opening when disabled
packages/react/src/context-menu/trigger/ContextMenuTrigger.test.tsx	Added comprehensive tests for disabled prop covering both right-click and long press interactions
packages/react/src/context-menu/root/ContextMenuRoot.test.tsx	Added test to verify disabled prop at root level prevents menu opening
docs/src/app/(private)/experiments/context-menu.tsx	Added interactive demo for testing disabled context menu functionality

[greptile-apps]

Additional Comments (1)

1. packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx, line 154-172 (link)

   logic: Native context menu still blocked when disabled.

   When disabled, the native browser context menu won't appear on the trigger element. The handleDocumentContextMenu effect should check disabled state before preventing default.

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[mj12albert]

Thanks for the PR ~ I can reproduce the bug and left some comments

[mj12albert]

For this it would be good to use

import {
  SettingsMetadata,
  useExperimentSettings,
} from '../../../components/Experiments/SettingsPanel'

example:

base-ui/docs/src/app/(private)/experiments/menubar.tsx

Line 28 in b782bdd

const { settings } = useExperimentSettings<Settings>();

[arturbien]

Not sure if its the right approach in this case. There's bunch of complex examples of the context-menu on this page like multi level nested context menus, and its not clear where the disabled prop should be applied (the inner, outer, nested, all of them?)

in the menubar case, there's only one instance of the menubar on the page so its clear where the settings props go

[atomiks]

Agree that settings don't need to be added here. Thanks for the fix!

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+57B(+0.01%)	🔺+22B(+0.02%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.