Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
web-padawan opened this issue Nov 21, 2024 · 2 comments

Comments

@web-padawan
Copy link
Member

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
Copy link
Member Author

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.

@web-padawan
Copy link
Member Author

UPD: closing on mousedown isn't an option since the popover can then re-opened: #8216 (review)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants