Modal will autoclose with an opened Portal

[FckYeah]

Steps

1. Create a <Modal /> with an onClose prop and a <Portal />.
2. Keep opened <Portal />.
3. Open <Modal />.

Expected Result

Modal should open.

Actual Result

Modal never will open. Modal uses Portal as a wrapper if I understand clearly. click event listener subs to all open modals and portals and pass through all of them. Since didClicknRootNodeClick has been changed here, <Modal /> handles a click in handleDocumentClick and recognizes it as click on dimmer. Everything is ok if <Modal /> will be without dimmer or <Modal />'s content will be right under a click point.

Version

0.77.2

Testcase

https://codesandbox.io/s/9y3wzpyjky

[rodolfoag]

Same happening here after upgrade to 0.77.2.

[b0gok]

Is it related to this #2493 ?

[levithomason]

Yes, this sounds like it is duplicated in #2493. See workarounds there. A fix is in the works.

[levithomason]

I am releasing 0.78.1 right now with a proposed fix for this. Once it is live (~10 minutes), please update the codesandbox, try it, and report back.

[levithomason]

Confirmed worked. Forked codesandbox here: https://codesandbox.io/s/328x7n20ym. I only needed to update to the latest 0.78.1 to get the fix.

Thanks for the reporting folks!

[b0gok]

@levithomason it works for me too. Thank you for your work!

[amankkg]

@levithomason seems like the issue is reproduced when the content of modal is changed. https://codesandbox.io/s/30n2v379r1 here is the example when changing one form with another - onClose is fired, it's important that the second form has more inputs, so markup very is different. Of course, workarounds are possible, but still.

[amankkg]

more info https://stackoverflow.com/questions/50712568/how-to-keep-semantic-ui-modal-from-closing-when-displaying-different-components/50716937#50716937

if you ask, we can create a separate issue

[amankkg]

OK, opened #2888