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

fix: hide overlay if position target element is hidden #7454

Merged
merged 2 commits into from
May 28, 2024

Conversation

DiegoCardoso
Copy link
Contributor

Description

If the target element is hidden, either by having display: none set to itself or any of its parents, a resize observer for that element is triggered.

This change adds a check for the target element size on the resize observer callback and closes the overlay in case the element is hidden.

Fixes #7437

Type of change

  • [X ] Bugfix
  • Feature

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437
Copy link

sonarcloud bot commented May 28, 2024

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarCloud

@@ -232,6 +232,11 @@ export const PositionMixin = (superClass) =>

const targetRect = this.positionTarget.getBoundingClientRect();

if (targetRect.width === 0 && targetRect.height === 0 && this.opened) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: this condition can be potentially refactored to use !this.positionTarget.checkVisibility() && this.opened, but checkVisibility is only supported in Safari 17.4+.

@DiegoCardoso DiegoCardoso merged commit d8e14c4 into main May 28, 2024
9 checks passed
@DiegoCardoso DiegoCardoso deleted the fix/overlay/close-overlay-parent-hidden branch May 28, 2024 10:32
vaadin-bot pushed a commit that referenced this pull request May 28, 2024
* fix: hide overlay if position target element is hidden

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437
vaadin-bot pushed a commit that referenced this pull request May 28, 2024
* fix: hide overlay if position target element is hidden

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437
vaadin-bot pushed a commit that referenced this pull request May 28, 2024
* fix: hide overlay if position target element is hidden

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437
DiegoCardoso added a commit that referenced this pull request May 28, 2024
…4.3) (#7457)

* fix: hide overlay if position target element is hidden

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437

Co-authored-by: Diego Cardoso <[email protected]>
DiegoCardoso added a commit that referenced this pull request May 28, 2024
…4.4) (#7456)

* fix: hide overlay if position target element is hidden

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437

Co-authored-by: Diego Cardoso <[email protected]>
DiegoCardoso added a commit that referenced this pull request May 28, 2024
…3.5) (#7455)

* fix: hide overlay if position target element is hidden (#7454)

* fix: hide overlay if position target element is hidden

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437

* chore: add missing nextRender import

* test: import text-field in combo-box-light mock test

---------

Co-authored-by: Diego Cardoso <[email protected]>
@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.

Overlay updates its position when owner's ancestor becomes invisible
4 participants