1878708 - Allow top layer elements to be nested within popovers

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, enhancement)

Description

[Keith Cirkel]

Steps to reproduce:

This is a tracking issue for https://github.com/whatwg/html/issues/9998 & https://github.com/whatwg/html/pull/10116

---

Given some markup like:

<div id=popover popover>
  <button id="openDialog">Open Dialog</button>
  <dialog id=dialog>
    I'm a dialog!
  </dialog>
</div>
<button id="openPopover">Open Popover</button>  
<button>I do nothing!</button>

With some JS like

openDialog.onclick = () => {
  dialog.showModal();
}

openPopover.onclick = () => {
  popover.showPopover();
}

Actual results:

Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the Esc key - if you have one available on your device).

Expected results:

The popover should not close the dialog.

Comment 1

[Keith Cirkel]

Attachment: Bug 1878708 - Dialogs HideAllPopoversUntil nearest popover, not document. r=smaug

Given some markup like:

<div id=popover popover>
  <button id="openDialog">Open Dialog</button>
  <dialog id=dialog>
    I'm a dialog!
  </dialog>
</div>
<button id="openPopover">Open Popover</button>
<button>I do nothing!</button>

With some JS like

openDialog.onclick = () => {
  dialog.showModal();
}

openPopover.onclick = () => {
  popover.showPopover();
}

Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the Esc key - if you have one available on your device).

It is expected that the popover should not close the dialog, as it causes the invisible Modal Dialog to make the whole page inert, and it is very difficult for users (and developers) to discover how to undo this action (pressing escape).

This was reported in https://github.com/whatwg/html/issues/9998, and WhatWG resolved to fix this, which in https://github.com/whatwg/html/pull/10116.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/52284e30cea2
Dialogs HideAllPopoversUntil nearest popover, not document. r=smaug

Comment 4

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/52284e30cea2