Remove click-outside handling for Dialog

[grebaldi]

Motivation

I've come across multiple scenarios (namely: https://github.com/sitegeist/Sitegeist.Archaeopteryx and https://github.com/Flowpack/media-ui) in which UI extensions need to stack dialogs on top of each other.

This interferes with our current click-outside handling for Dialogs, which makes the assumption that such stacking never happens.

The effect of that can be seen here:

Peek.2021-07-18.16-30.mp4

You see that the new Media UI is embedded in the Node Creation Dialog (Dialog 1). Then we click on "Upload", which opens the Upload Modal of the new Media UI (Dialog 2). If we click anywhere inside Dialog 2, both dialogs close. When we click ouside Dialog 2, both dialogs close as well.

BothDialogsCloseOnClickOutside.mp4

The reason is, that after opening Dialog 2, the entire screen is now an area that is considered to be outside Dialog 1. So if we click anywhere, Dialog 1 receives its request to close. Since Dialog 1 is removed from VDOM, and Dialog 2 is a child of Dialog 1, Dialog 2 has to leave as well.

Possible Solution

Imho, we don't need such aggressive click-outside handling for our Dialogs. It would be sufficient to just react to clicks on the semi-transparent overlay, since it covers (almost) the entire screen.

I say almost, because the top bar of the ui is not covered:

This can potentially be worked around, because Dialogs live in an isolated part of the DOM tree, but I don't know if this behvaior is even intentional in the first place 😅. (At least it doesn't seem right to me 🧐)

I'd suggest to implement a solution as a bugfix for 5.3+.

Affected Versions

Neos: >=3.3
UI: >=1.0

[Sebobo]

Sounds good to me!