Popup re-appears on click or re-focus on window after modal open

[tomking2]

Bug Report

Steps

When a button has got a popup and contains an embedded modal, for example

Hover over the button and cause the popup to display, then click the button to open a fullscreen modal. Upon click of the modal or moving cursor out and back into the browser window will cause the popup to reappear.

This is where a popup contains some complex component, which eventually houses a button that provides a Modal. As the modal is a child of the complex component, once the modal is loaded the Modal itself (entire screen) becomes the trigger.

Used to work before 0.88.x, I assume an update to the component may have caused this to change.

When this occurs, the popup is often housing a relatively complex component that has a modal somewhere further down the tree, usually in a list of children being rendered. As such, abstracting the Modal outside of the popup is tricky. E.g. you may have a <EditItem /> component in a table, that allows you to edit each row and brings up a modal with a form.

Expected Result

Popup does not appear until modal is closed and button can be hovered

Actual Result

When you click the button and a modal appears, if you re-click anywhere on the modal itself, or move the mouse away from the browser window and back on, the popup reappears. It almost seems that when a modal is overlaying the screen, the entire window becomes the event listener for the popup trigger.

Version

2.0.3

Testcase

https://codesandbox.io/s/semantic-ui-react-forked-w3y4f?file=/index.js

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[tomking2]

Issue continues to persist on latest 2.0.4 version. Is there a best practice being missed here, or a genuine bug?

[tomking2]

A similar thing is also the case for a modal appearing out of a Menu dropdown, as the onClick propagates down to the child, in this case a dropdown.

Can be overridden in this case by placing an onClick handler on the modal and stopPropagation, but I expect this shouldn't be happening.

https://codesandbox.io/s/semantic-ui-example-forked-ptfpy?file=/example.js