Popover outside click closes parent dialog

[tomivirkki]

Description

Clicking outside of a modeless opened popover that's inside an open dialog also causes the dialog to close

https://github.com/vaadin/web-components/assets/1222264/db89a42d-4347-4d3c-9bf4-c8c8e5ad7249

Note: Clicking outside a modal popover doesn't close the parent dialog so this may be the expected behavior for modeless popovers. Needs discussion.

Expected outcome

Only the popover overlay should close

Minimal reproducible example

<vaadin-dialog></vaadin-dialog>

<script type="module">
  import '@vaadin/popover';
  import '@vaadin/dialog';

  const dialog = document.querySelector('vaadin-dialog');
  dialog.renderer = (root) => {
    root.innerHTML = `
      <button id="target">Open popover</button>
      <vaadin-popover for="target"></vaadin-popover>
    `;
    root.querySelector('vaadin-popover').renderer = (root) => {
      root.textContent = 'popover content';
    };
  };

  dialog.opened = true;
</script>

Steps to reproduce

• Open the popover by clicking the button
• Click outside the dialog

Environment

Vaadin version(s): 24.5

Browsers

Issue is not browser related

[web-padawan]

Related to #7466

[tomivirkki]

We discussed this internally and it might make the most sense to have an outside click only close the topmost overlay which is closable with an outside click (same with an ESC).

If a dialog (or another popover) contains an opened modeless popover that doesn't close with an outside click, then a click outside the parent overlay could close it (this would result in both overlays getting closed).

[tomivirkki]

It might not be easy to make randomly stacked popovers and dialogs work nicely together because Popover currently uses its own global click listener implementation. Perhaps we could make overlay accept a property that makes it support modeless+outside click listener the way popover needs, to have the overlay stacking logic in one place only.