[Bug]: OverflowMenu does not close when clicking on an element inside of an <iframe>

[vmukhachev]

Package

@carbon/react

Browser

Chrome

Package version

17.0.2

React version

17.0.2

Description

see the title

CodeSandbox example

https://codesandbox.io/s/reverent-frog-jydl1q?file=/src/App.js

Steps to reproduce

1. open the codesandbox link
2. click on the triple dot to open the menu
3. click inside of iframe
4. see that menu is not closed (bug!)
5. click on the page near the menu button
6. see that menu is closed

Code of Conduct

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

[tay1orjones]

@vmukhachev I think for this you'll need to wrap the OverflowMenu and iFrame in a common ancestor/parent and listen for click events. This click event could then be used to provide the proper value to OverflowMenu's open prop.

Would this work for your use case? In case the codesandbox has issues, I replicated this into stackblitz for further testing https://stackblitz.com/edit/github-4nannp?file=src%2FApp.jsx

[joshblack]

One option could be to look into listening to blur window events and sniffing if the active element is an iframe.

[vmukhachev]

@tay1orjones, thanks! I have written a similar workaround by listening for the blur on window

I think, current OverflowMenu has the code doing something similar:
https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/OverflowMenu/OverflowMenu.js#L427
In case this code will be switched to listen for the "blur" and on the window, it should work for iframes as well.