[Bug]: Nested overlay-trigger doesn't show content in Chrome

[bslaught]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

overlay-trigger

Expected behavior

Clicking "Open dialog" shows the dialog. This is the behavior in Firefox and Safari.

Actual behavior

Clicking "Open dialog" shows a flash of the background you would see when opening a dialog, but does not show the dialog. This is the behavior in Chrome (version 122.0.6261.129 on MacOS Ventura 13.2.1).

The dialog works as expected when you change the sp-popover's slot="click-content" to slot="hover-content".

It also works as expected on SWC version 0.39.4.

Screenshots

No response

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/eJF8FjCSdp2jBqWwaaNg.
2. Click "Open popover".
3. Click "Open dialog".

Sample code that illustrates the problem

<overlay-trigger placement="bottom">
  <sp-button slot="trigger">Open popover</sp-button>
  <sp-popover slot="click-content" direction="bottom">
    <overlay-trigger type="modal">
      <sp-button slot="trigger">Open dialog</sp-button>
        <sp-dialog-base slot="click-content" underlay>
          <sp-dialog>
            <h2 slot="heading">Dialog</h2>
            <sp-button slot="button" onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));">
              Close
            </sp-button>
          </sp-dialog>
        </sp-dialog-base>
    </overlay-trigger>
  </sp-popover>
</overlay-trigger>

Logs taken while reproducing problem

No response

[Westbrook]

This is a bug specifically in Chromium's implementation at the intersection of [popover] and showModal() that has been addressed in the next Chromium version.

That being said, we do need to find a path to support users of this sort of Overlay stacking in the interim. Thanks for sharing this!