[Bug]: Overflow Menu in Modal Doesn't Close on Outside Click

[mohakgemini]

Package

@carbon/react

Browser

No response

Package version

v1.69.0

React version

No response

Description

Current Behavior

• OverflowMenu stays open when clicking outside the menu but inside the modal
• The menu can only be closed by:
  • Clicking the overflow menu trigger (⋮) again
  • Selecting a menu item
  • Clicking the ESC key

Expected Behavior

• OverflowMenu should close when clicking anywhere outside the menu, including the modal content area
• This should match the behavior of OverflowMenu when used outside of a modal

Reproduction/example

https://stackblitz.com/edit/github-pqznlb?file=src%2FApp.jsx

Steps to reproduce

Steps to Reproduce

1. Create a Carbon ComposedModal component
2. Add an OverflowMenu inside the ModalHeader
3. Open the modal
4. Click the overflow menu trigger (⋮) to open the menu
5. Try to click anywhere else inside the modal

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[guidari]

This issue is caused by this PR change from onMouseDown to onClick, and the evt.stopPropagation() here is blocking the OverflowMenu to listen for the click.
We should write a test to cover that once we fix it.

[guidari]

Hey @davidmenendez is there any specific bug that required the switch between onMouseDown to onClick?
I didn't find any alternative to fix that.