Opening a dialog as modal, nested inside a popover, causes the whole page to go inert with limited ways for the user to address it.

[keithamus]

What is the issue with the HTML Standard?

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).

Some repro steps:

1. Visit https://codepen.io/keithamus/pen/wvNLKeV (in a browser that supports native popover)
2. Click "Open Popover"
3. Click "Open Dialog"
4. Observe no visible top layer elements, the page is inert and seems to no longer be interactive.

This issue seems to stem from the fact that opening a dialog will hide all open popovers, and due to the nesting this - for reasons that are not evident to me - hide the dialog. Given the dialog is modal, and therefore on the top layer, it seems to me that the dialog should remain visible.

This is an issue across 3 browsers - Chrome, Safari, and Firefox (with dom.element.popover.enabled to true). Therefore I think it's an issue with how the feature is specified, though perhaps this is more for the CSSWG?

I've discussed this a little already in the OpenUI CG with @josepharhar and @lukewarlow.

[domenic]

Maybe a dupe of #9936 in root causes, although I guess this describes the reverse situation to that bug.