fix(overlay-root): measure "active-overlay" after styles are applied

adobe · Dec 16, 2019 · d1a9e38 · d1a9e38
1 parent 190e584
commit d1a9e38
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 4 deletions.
diff --git a/packages/overlay-root/src/active-overlay.ts b/packages/overlay-root/src/active-overlay.ts
@@ -137,6 +137,7 @@ export class ActiveOverlay extends LitElement {
     public offset = 6;
     private position?: PositionResult;
     public interaction: TriggerInteractions = 'hover';
+    private positionAnimationFrame = 0;
 
     private timeout?: number;
     private hiddenDeferred?: Deferred<void>;
@@ -254,8 +255,8 @@ export class ActiveOverlay extends LitElement {
             positionOptions.crossOffset
         );
 
-        this.style.setProperty('top', `${this.position.positionTop}px`);
         this.style.setProperty('left', `${this.position.positionLeft}px`);
+        this.style.setProperty('top', `${this.position.positionTop}px`);
     }
 
     public async hide(): Promise<void> {
@@ -271,14 +272,21 @@ export class ActiveOverlay extends LitElement {
         }
     };
 
-    private onSlotChange(): void {
+    private schedulePositionUpdate(): void {
         // Edge needs a little time to update the DOM before computing the layout
-        requestAnimationFrame(() => this.updateOverlayPosition());
+        cancelAnimationFrame(this.positionAnimationFrame);
+        this.positionAnimationFrame = requestAnimationFrame(() =>
+            this.updateOverlayPosition()
+        );
+    }
+
+    private onSlotChange(): void {
+        this.schedulePositionUpdate();
     }
 
     public connectedCallback(): void {
         super.connectedCallback();
-        this.updateOverlayPosition();
+        this.schedulePositionUpdate();
     }
 
     public render(): TemplateResult {

diff --git a/packages/overlay-root/stories/overlay-root.stories.ts b/packages/overlay-root/stories/overlay-root.stories.ts
@@ -257,4 +257,84 @@ storiesOf('Overlay Root', module)
                 <recursive-popover></recursive-popover>
             </overlay-root>
         `;
+    })
+    .add('Edges', () => {
+        return html`
+            <style>
+                overlay-root {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100vw;
+                    height: 100vh;
+                }
+                overlay-trigger {
+                    position: absolute;
+                }
+                .top-right {
+                    top: 0;
+                    right: 0;
+                }
+                .bottom-right {
+                    bottom: 0;
+                    right: 0;
+                }
+                .bottom-left {
+                    bottom: 0;
+                    left: 0;
+                }
+            </style>
+            <overlay-root>
+                <overlay-trigger class="top-left" placement="bottom">
+                    <sp-button slot="trigger">
+                        Top/
+                        <br />
+                        Right
+                    </sp-button>
+                    <sp-tooltip
+                        slot="hover-content"
+                        delay="100"
+                        open
+                        tip="bottom"
+                    >
+                        Triskaidekaphobia and More
+                    </sp-tooltip>
+                </overlay-trigger>
+                <overlay-trigger class="top-right" placement="bottom">
+                    <sp-button slot="trigger">
+                        Top/
+                        <br />
+                        Right
+                    </sp-button>
+                    <sp-tooltip
+                        slot="hover-content"
+                        delay="100"
+                        open
+                        tip="bottom"
+                    >
+                        Triskaidekaphobia and More
+                    </sp-tooltip>
+                </overlay-trigger>
+                <overlay-trigger class="bottom-left" placement="top">
+                    <sp-button slot="trigger">
+                        Bottom/
+                        <br />
+                        Left
+                    </sp-button>
+                    <sp-tooltip slot="hover-content" delay="100" open tip="top">
+                        Triskaidekaphobia and More
+                    </sp-tooltip>
+                </overlay-trigger>
+                <overlay-trigger class="bottom-right" placement="top">
+                    <sp-button slot="trigger">
+                        Bottom/
+                        <br />
+                        Right
+                    </sp-button>
+                    <sp-tooltip slot="hover-content" delay="100" open tip="top">
+                        Triskaidekaphobia and More
+                    </sp-tooltip>
+                </overlay-trigger>
+            </overlay-root>
+        `;
     });