Modal triggered from menu item issues

[cytey]

Steps

1. Have a menu
2. Have a menu item that trigger a modal
3. Have a modal that has a form with a checkbox
4. Open the menu
5. Click on the menu item that trigger the modal
6. Click on the checkbox in the form of the modal

Expected Result

The checkbox in the form of the modal should be clickable and not dismiss the modal upon click

Actual Result

Upon clicking on any part of the modal, the modal is closed

Version

0.63.4

Testcase

http://codepen.io/anon/pen/zNxXKo?editors=0010

[levithomason]

Please provide a test case. You can fork the codepen in the issue template.

[cytey]

@levithomason I have added the testcase. Thanks for your help!

[levithomason]

Ah, I see. The issue here is that the Modal is owned by the Menu. It actually doesn't matter where you click in the Modal, clicking anywhere (or taking any action) that closes the Menu causes it to unmount which causes the Modal to unmount. Also, in this case, it isn't actually the Menu that is at fault but the Popup that is containing the Menu.

The solution here is going to be separating some of these concerns. I'd recommend moving the Modal higher in the tree, perhaps to the root of your view component, and controlling its open state directly, rather than with a Popup. In this case, your Popup / Menu would toggle some app state showLogoutModal and that is all. Then, your Modal would consume that state to open/close. This way, the Popup is not the owner of the Modal. I believe this is the more "React way" of going about this relationship.