Research on *non-top-layer* non-modal dialogs

[mfreed7]

I'm opening this issue to attempt to convince someone to do a bit of research. The context is provided by whatwg/html#9376 and whatwg/html#4633, but the TL/DR is:

We now have two ways to make a "non-modal dialog" in the platform:

1. <dialog id=foo> <script>foo.show()</script>
2. <dialog popover id=foo> <button popovertarget=foo>Click me</button>

Both of these have role=dialog as they should, but the issue at hand is that only #2 has the dialog in the top layer. The non-modal dialog in example #1 paints in its normal z-index position and can be obscured by other content.

So the question is: how common are non-top-layer dialogs? I.e. a dialog that allows interaction with the rest of the application/content, but which can be obscured and "go behind" some or all of the page content. This question can, and should, be answered for both web content and native content.

Is anyone interesting in kicking off this research? In my opinion, the best answer would consist of a list of example use cases for non-modal dialogs, a link to the specific implementation being researched, and a Y/N answer for whether that implementation has the dialog painted always-on-top.

[css-meeting-bot]

The Open UI Community Group just discussed Research on *non-top-layer* non-modal dialogs.

The full IRC log of that discussion

<jarhar> masonf: theres an open issue on whatwg to deprecate non-modal dialog, reason behind that is that dialog with popover attribute is better
<jarhar> masonf: question that came up: what if you want to have a non-modal non-top layer dialog?
<jarhar> masonf: thats something thats currently provided by dialog.show()
<jarhar> masonf: question is: why would you ever want to do that? it would render below things
<jarhar> masonf: maybe there are good examples that i dont know of
<gregwhitworth> q+
<scotto_> q+
<jarhar> masonf: please do some research of non-modal dialogs and let me know. should they be obscured? what are the use cases? if there arent any good ones then that helps the case to deprecate non-modal dialogs
<jarhar> masonf: if there are good use cases, we can have guidance for that
<jarhar> masonf: we can talk about that now, but my sense is that we should probably actually do some research and find examples
<jarhar> gregwhitworth: to clarify: when they are non-modal non-top layer, so basically they are ok to be obscured by something else? cant you have multiple things in the top layer that obscure other things in the top layer?
<jarhar> masonf: yes, you can have a top layer dialog and other things in the top layer can go on top of that
<jarhar> gregwhitworth: i have a concrete example of teaching ui
<jarhar> gregwhitworth: to the end user it appears as a top layer popover, but thats such a nuanced question
<jarhar> gregwhitworth: top layer is so nuanced
<gregwhitworth> ack gregwhitworth
<jarhar> masonf: in the native app world, sometimes native pickers can pop up but if you click back on the browser window the picker goes behind the browser window
<jarhar> masonf: not sure thats a great example, kind of confusing
<gregwhitworth> ack scotto_
<jarhar> scotto_: i have some internal apps that i cant share screenshots of where we have use cases where - imagine a data flow of sorts with nodes that branch out
<jarhar> scotto_: the whole area can be zoomed, scrolled, etc, all in html
<jarhar> scotto_: we have dialog popups where it would break the ui if they were top layer because you can scroll those nodes out of the visible viewport. if they were top layer, then ???
<jarhar> masonf: that sounds like a limitation of - what you really want is anchor positioning. sort of a missing feature for now
<jarhar> scotto_: if anchor positioning could do that and top layer dialog could be tethered to something so that if it was scrolled out of the viewport, then you could say i do want this to continue to show or i want it to be hidden
<jarhar> scotto_: if there was an option for that that would be great
<jarhar> masonf: that is part of the current proposal for anchor positioning
<jarhar> scotto_: if anchor positioning can get through the door then i dont care anymore
<Luke> q+
<jarhar> gregwhitworth: given the nuance, if you can think of anything then compile on the issue
<jarhar> masonf: screenshot or link to it
<gregwhitworth> ack Luke
<chrishtr> q+
<jarhar> Luke: its worth is tweeting something to get other peoples input to give us examples, especially because it might be an internal thing that they cant link to but they could provide screenshots or explanations of their usecase
<jarhar> Luke: we have to nail down the exact question though
<chrishtr> q-
<jarhar> masonf: i would hope that the post i made is the question but i would love if somebody could tweet

[lukewarlow]

If you had a non-modal <dialog> that you opened and then had a legacy <div role="dialog"> that you wanted to show on top. Where perhaps that legacy dialog came from somewhere that you can't control markup but can CSS (web component) then having the actual dialog be in top layer would break that relationship.

Not really a "use case" more of a potential obstruction to lowering non-modal non-popover dialog usage.

[lukewarlow]

One potential use case is for initially open non-modal dialogs (cookie pop-ups?). See #941

[gregwhitworth]

As noted, I would share some scenarios that "seem" like what you're asking but during the call you noted that they don't technically apply to specifically what you're looking for. We decided that even though they aren't the scenarios this allows us to still show use-cases and thus compile research to validate or in-validate the hypothesis on this issue.

Here is one from a fake Salesforce org where I'm hovering over over a graph and the "teaching UI" which I opened first stays on top of the tooltip. I'm unsure if this is actually what the user would want since I'm not actually interacting with the help menu but I am with the tooltip.

[lukewarlow]

Coming back to this, aside from the initially open case, a popover dialog won't interact with a form method="dialog" in the same way as a standard dialog does.

[scottaohara]

there was mention in either the discord or another issue (sorry i'm having trouble tracking it down, but maybe someone else has seen it) where someone was pointing out they wanted a popover that wouldn't break out of a scrollable container (and i refrained from saying "so you want a non-modal dialog then?")

[github-actions]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.