Menu doesn't close when an outside click hits an iframe

[sunesimonsen]

Expectations

Click inside iframes closes the menu:

Reality

It doesn't:

Steps to Reproduce

1. Open a menu
2. Click in an iframe
3. The menu is not closed

Fine Print

• Component: menus
• Browsers: all

[sunesimonsen]

I also reproduced it on the styleguide just to isolate the problem:

[ryanseddon]

Thanks @sunesimonsen I know exactly why this isn't working.

Right now we rely on an event that is attached to the document so when clicking the iframe it never triggers that event and never closes. I'll have a play around but I think we can get away with just triggering the close when the menu is blurred.

I'll put up a PR shortly.

[sunesimonsen]

This is how it was done in the old solution https://github.com/zendeskgarden/react-components-archive/blob/master/src/core/RelativePositionedPopup/index.js#L118-L166

But if it is possible to make a solution that works with blur that would also be great. The usual problem is that you need to listen for mousedown on everything and prevent default to avoid unwanted blur events.

[sunesimonsen]

I just tried the new solution in Knowledge Client and it unfortunately don't work. I think the reason is that we only attach the event handlers on componentDidMount and not when the menu is opened. That means any iframe add after the menu would not have the handler attached. Another problem is that the listener on the documents isn't using event capturing like the implementation mentioned about and on the PR, so if the iframe calls event.stopPropagation() this won't work.

I can try to give it a shot if you like.

[sunesimonsen]

I created a PR #149, I need a bit of help testing it.