Skip to content

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

@bslaught

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions