fix: limit popovers opened by the same trigger to one

[ugur-vaadin]

Description

This PR limits the number of popovers opened by the same trigger to 1. This applies only to hover and focus. The approach was inspired by the comment under the issue.

Fixes #7085

Type of change

• Bugfix
• Feature

Checklist

• I have read the contribution guide: https://vaadin.com/docs/latest/contributing/pr
• I have added a description following the guideline.
• The issue is created in the corresponding repository and I have referenced it.
• I have added tests to ensure my change is effective and works as intended.
• New and existing tests are passing locally with my change.
• I have performed self-review and corrected misspellings.

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[vursen]

After applying this fix, opening a nested hover-triggered popover no longer seems to work:

Screen.Recording.2025-03-12.at.16.00.12.mov

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

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

<script type="module">
  const popover = document.querySelector('vaadin-popover');

  popover.trigger = ['hover'];

  popover.renderer = (root) => {
    if (root.firstChild) {
      return;
    }

    const layout = document.createElement('vaadin-horizontal-layout');
    layout.setAttribute('theme', 'spacing-s');
    layout.style.alignItems = 'baseline';

    const field = document.createElement('vaadin-text-field');
    field.label = 'Discount code';

    const button = document.createElement('vaadin-button');
    button.id = 'apply-button';
    button.textContent = 'Apply';

    // Create nested popover
    const nestedPopover = document.createElement('vaadin-popover');
    nestedPopover.setAttribute('for', 'apply-button');
    nestedPopover.setAttribute('position', 'right-start');
    nestedPopover.trigger = ['hover'];
    nestedPopover.renderer = (nestedRoot) => {
      if (nestedRoot.firstChild) {
        return;
      }
      const text = document.createElement('div');
      text.textContent = 'Click to apply the discount code';
      nestedRoot.appendChild(text);
    };

    layout.append(field, button, nestedPopover);
    root.append(layout);
  };
</script>