canonical
`ContextualMenu`: outside click should be ignored if there is a modal open
When the closeOnOutsideClick prop of the ContextualMenu is true, it should be explicitly checked that there is no modal open before closing the contextual menu on outside click.
This is because, with the current behaviour, a click inside the modal would be captured as outside click for the ContextualMenu, causing that to be closed, and since the modal can be a direct child of that ContextualMenu, it would end up being removed as well. See the problem more clearly in the following screen capture:
@lorumic Not sure if I fully understand. If Modal is a child of a ContextualMenu, why clicking on modal is recognised as clicking outside of ContextualMenu?
Overall, I don't think we should make any explicit connections between different component (like checking if modals are open from contextual menu). But maybe there could be some flag on ContextualMenu to prevent it from being closed on clicks outside, for cases like this.
@lorumic Not sure if I fully understand. If Modal is a child of a ContextualMenu, why clicking on modal is recognised as clicking outside of ContextualMenu?
@bartaz I'm afraid too much time has passed, and in the meantime we have done a complete overhaul of the UX for that modal, so now I cannot experience the issue shown in the screen capture above anymore. Feel free to close this if you think it's not relevant.
EDIT: Actually, I think I can still answer your question though. The Modal is a child of the ContextualMenu but it's opened inside a portal - so that makes it not a child of the root element of the ContextualMenu, but rather, a completely different DOM node. I think this is what causes the issue shown above: the click inside the modal is recognised as a click in a DOM node that is not in the tree of the root element of the ContextualMenu, causing the "close on outside click" effect to take place.
Bumping this issue as the combination "modal inside portal + contextual menu" is giving troubles to other projects as well: https://github.com/canonical/sdcore-nms/pull/807
Would be great to have some guidance on how we should handle modals inside a portal when they are triggered by a contextual menu - or rather, if we should avoid the Portal completely in such case.
So far, we have been setting the closeOnOutsideClick of the ContextualMenu to false to fix the problem, but this can have ugly results when we have many contextual menus (e.g. in a table):