From 755c072b9f8eae4f6df83f2d5cb6ec06588246a4 Mon Sep 17 00:00:00 2001 From: Yonatan Kra Date: Tue, 15 Feb 2022 14:31:11 +0200 Subject: [PATCH] fix(popup): now watching anchor size for position correctness (#1236) * fix(popup): now watching anchor size for position correctness Closes #1234 * Linting fixes * update story * Fix the tests * Fix linting * Refactor tests Co-authored-by: Rina --- components/popup/src/vwc-popup-base.ts | 16 ++--- components/popup/stories/popup.stories.js | 9 +-- components/popup/test/popup.test.js | 81 +++++++++++++++++++--- test/test-helpers.js | 9 ++- ui-tests/index.ts | 1 + ui-tests/snapshots/vwc-popup.png | Bin 28609 -> 28934 bytes ui-tests/tests/vwc-popup/index.js | 45 ++++++++++++ 7 files changed, 137 insertions(+), 24 deletions(-) create mode 100644 ui-tests/tests/vwc-popup/index.js diff --git a/components/popup/src/vwc-popup-base.ts b/components/popup/src/vwc-popup-base.ts index f0f378b6d..6a98ec93f 100644 --- a/components/popup/src/vwc-popup-base.ts +++ b/components/popup/src/vwc-popup-base.ts @@ -122,14 +122,8 @@ export class VWCPopupBase extends LitElement { this.open = false; } - // TODO: Make the observer work on positioning for the first time - // new `IntersectionObserver` constructor - private observer = new IntersectionObserver((entries) => { - for (const entry of entries) { - const bounds = entry.boundingClientRect; - console.log('anchor element bounds ', bounds); - requestAnimationFrame(() => this.updatePosition()); - } + private sizeObserver = new ResizeObserver(() => { + return this.updatePosition(); }); override connectedCallback(): void { @@ -143,19 +137,21 @@ export class VWCPopupBase extends LitElement { window.removeEventListener('scroll', this.updatePosition); window.removeEventListener('resize', this.onResizeWindow); // Disconnect the observer to stop from running in the background - this.observer.disconnect(); + this.sizeObserver.disconnect(); } protected override firstUpdated(_changedProperties: PropertyValues): void { super.firstUpdated(_changedProperties); this.anchorEl = this.getAnchorById(); - if(this.anchorEl) this.observer.observe(this.anchorEl); + if(this.anchorEl) this.sizeObserver.observe(this.anchorEl); } protected override updated(changes: Map): void { super.updated(changes); if (changes.has('anchor')) { + this.sizeObserver.disconnect(); this.anchorEl = this.getAnchorById(); + if(this.anchorEl) this.sizeObserver.observe(this.anchorEl); } this.updatePosition(); } diff --git a/components/popup/stories/popup.stories.js b/components/popup/stories/popup.stories.js index 12551b8c3..4326192fc 100644 --- a/components/popup/stories/popup.stories.js +++ b/components/popup/stories/popup.stories.js @@ -34,7 +34,7 @@ const Template = args => html` }