OverflowMenu not working inside Modal (v10)

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having. Trying to upgrade to v10. We are using OverflowMenu inside Modal as seen in the screenshot below. (Open in top left corner of picture). The click event is being blocked by something. I compared OverflowMenuComponent inside and outside the modal. Looking at the event listeners it seems like the event is being blocked by something called focusTrap.

Is this issue related to a specific component? Interaction between OverflowMenuItem and Modal

What did you expect to happen? What happened instead? What would you like to see changed? I expect the click event to get to the handler. It does not.

What browser are you working in? Chrome

What version of the Carbon Design System are you using? “carbon-components”: “^10.0.0”, “carbon-components-react”: “^7.0.0”,

What offering/product do you work on? Any pressing ship or release dates we should be aware of? I work on Voice Agent, and we planned on finishing the upgrade to v10 for our August release.

Steps to reproduce the issue

1. Step one Create a Modal with an OverflowMenu inside it.
2. Step two Have an OverflowMenuItem item with an onClick handler.
3. Step three Click on the menu item to see it doesn’t work.

Additional information

• Screenshots or code

[asudoh]

Thanks - Would you try adding focusTrap={false} to <Modal>? Your CodeSandbox seems to be working this way.

[abbeyhrt]

I’m going to close this since it seems like the issue was addressed, feel free to comment if you feel like it hasn’t been addressed yet!