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

feat: add trigger property, make opened property public #7430

Merged
merged 16 commits into from
May 22, 2024

Conversation

web-padawan
Copy link
Member

@web-padawan web-padawan commented May 20, 2024

Description

  • Added the trigger property for setting how popover opens and closes.
  • Changed opened property to be public (especially for manual trigger).

Type of change

  • Feature

@web-padawan web-padawan marked this pull request as ready for review May 21, 2024 10:29
@web-padawan web-padawan requested a review from vursen May 21, 2024 10:29
@web-padawan web-padawan force-pushed the feat/popover-trigger branch from 2e6d619 to 7e379c8 Compare May 22, 2024 09:18
@web-padawan web-padawan force-pushed the feat/popover-trigger branch from 7e379c8 to cd8f324 Compare May 22, 2024 09:20
packages/popover/src/vaadin-popover.js Outdated Show resolved Hide resolved
packages/popover/src/vaadin-popover.js Outdated Show resolved Hide resolved
packages/popover/src/vaadin-popover.js Outdated Show resolved Hide resolved
packages/popover/src/vaadin-popover.js Outdated Show resolved Hide resolved
packages/popover/src/vaadin-popover.js Outdated Show resolved Hide resolved
packages/popover/src/vaadin-popover.js Outdated Show resolved Hide resolved
@vursen
Copy link
Contributor

vursen commented May 22, 2024

Issue: Popover opens and immediately closes on click when modal and trigger is focus

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

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

<script type="module">
  import '@vaadin/button';
  import '@vaadin/horizontal-layout';
  import '@vaadin/popover';
  import '@vaadin/text-field';
  
  const popover = document.querySelector('vaadin-popover');

  popover.modal = true;
  popover.trigger = ['focus'];

  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.textContent = 'Apply';

    layout.append(field, button);

    root.append(layout);
  };
</script>

Copy link

Quality Gate Passed Quality Gate passed

Issues
14 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

@web-padawan
Copy link
Member Author

Popover opens and immediately closes on click when modal and trigger is focus

Fixed.

@web-padawan web-padawan merged commit 74586f5 into main May 22, 2024
9 checks passed
@web-padawan web-padawan deleted the feat/popover-trigger branch May 22, 2024 13:55
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.5.0.alpha1 and is also targeting the upcoming stable 24.5.0 version.

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

Successfully merging this pull request may close these issues.

3 participants