[Bug]: MenuItem is not correctly focused when expanded within ComposedModal

[fred104]

Package

@carbon/react

Browser

Chrome

Package version

v1.60.0

React version

v18.2

Description

We are trying to use MenuButton within ComposedModal and found a strange bug. When you click the MenuButton to expand the menu, it should focus on the first menu item. However, the other button is being focused which is triggered by ComposedModal.

See the call stack below. (handleBlur and wrapFocus are from ComposedModal.)

Reproduction/example

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

Steps to reproduce

Click the MenuButton (Click me and you will see above button being focused!) and you will see the above button is focused. The console prints out the call stack too.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

IBM SOAR

Code of Conduct

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

[2nikhiltom]

Closed via #17145