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 mouse focus stays open if target click opens the dialog #8224

Open
web-padawan opened this issue Nov 25, 2024 · 0 comments

Comments

@web-padawan
Copy link
Member

Description

This is similar to #8197 but related to focus trigger (especially mouse focus) so I decided to create a separate issue.

Expected outcome

Expected the popover to not open on target focusin when there's already another overlay opened on target click:

popover-dialog.mp4

Note, opening the dialog doesn't move focus to it immediately so that focusin event is still handled by popover.

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 = ['focus'];

  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. Click the button so that dialog opens
  2. Popover will open soon after dialog and will be on top of it

Environment

Vaadin version(s): 24.5, 24.6

Browsers

Issue is not browser related

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

No branches or pull requests

2 participants