vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
470 stars 83 forks source link

[popover] Popover opened on hover stays open if target click opens the dialog #8197

Open web-padawan opened 1 day ago

web-padawan commented 1 day ago

Description

Tested the case from #8195 with vaadin-popover and there's a different problem: popover never closes. Technically it can happen in case when popover is used as an interactive tooltip with hover trigger.

Expected outcome

Expected the popover to be closed before the dialog opens.

Minimal reproducible example

<vaadin-button id="button">Target</vaadin-button>

<vaadin-popover for="button" position="bottom-start"></vaadin-popover>

<vaadin-dialog></vaadin-dialog>

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

  const popover = document.querySelector('vaadin-popover');
  popover.trigger = ['hover'];

  const dialog = document.querySelector('vaadin-dialog');
  const button = document.querySelector('vaadin-button');

  button.addEventListener('click', () => {
    dialog.opened = true;
  });

  popover.renderer = (root) => {
    root.textContent = 'Popover text';
  };

  dialog.renderer = (root) => {
    root.textContent = 'Dialog content';
  }
</script>

Steps to reproduce

  1. Move mouse over the button so that popover opens
  2. Click the button to open the dialog - popover remains open
  3. Click outside to close the dialog - popover is still open

Environment

Vaadin version(s): 24.5

Browsers

Issue is not browser related

web-padawan commented 4 hours ago

Note, we have some logic to prevent closing popover on overlay mouseleave when it's not the last overlay. It's supposed to cover cases with nested overlays - and in theory the vaadin-dialog might be also considered a "nested" overlay (especially when it's opened by click on the button inside the vaadin-popover) - in that case the parent popover shouldn't close.

I think we could add a logic to close the popover overlay on target mousedown in case its only trigger is "hover" + "focus", to make it behavior aligned with vaadin-tooltip. This way the UX of these components would be more consistent.