fix(overlay): add delay resolution from overlaid content (#3748)

* refactor: add delay logic to overlay.ts * refactor: add delay private property * refactor: update delay condition * test: add test for delay capability * refactor: tests
adobe · Nov 1, 2023 · 5c4f1f6 · 5c4f1f6
1 parent 828011b
commit 5c4f1f6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/packages/overlay/src/AbstractOverlay.ts b/packages/overlay/src/AbstractOverlay.ts
@@ -147,7 +147,12 @@ export class AbstractOverlay extends SpectrumElement {
     ): Promise<void> {
         return;
     }
-    delayed!: boolean;
+    get delayed(): boolean {
+        return false;
+    }
+    set delayed(_delayed: boolean) {
+        return;
+    }
     dialogEl!: HTMLDialogElement & {
         showPopover(): void;
         hidePopover(): void;

diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
@@ -95,7 +95,15 @@ export class Overlay extends OverlayFeatures {
      * provided that option.
      */
     @property({ type: Boolean })
-    override delayed = false;
+    override get delayed(): boolean {
+        return this.elements.at(-1)?.hasAttribute('delayed') || this._delayed;
+    }
+
+    override set delayed(delayed: boolean) {
+        this._delayed = delayed;
+    }
+
+    private _delayed = false;
 
     @query('.dialog')
     override dialogEl!: HTMLDialogElement & {

diff --git a/packages/overlay/stories/overlay-element.stories.ts b/packages/overlay/stories/overlay-element.stories.ts
@@ -76,6 +76,7 @@ const Template = ({
     open,
     placement,
     type,
+    delayed,
 }: Properties): TemplateResult => html`
     <style>
         .wrapper {
@@ -91,7 +92,7 @@ const Template = ({
             placement=${ifDefined(placement)}
             offset="-10"
         >
-            <sp-popover dialog>
+            <sp-popover dialog ?delayed=${delayed}>
                 <p>
                     Content goes here.
                     ${type === 'modal' || type === 'page'

diff --git a/packages/overlay/test/overlay-trigger-click.test.ts b/packages/overlay/test/overlay-trigger-click.test.ts
@@ -19,6 +19,9 @@ import {
 } from '@open-wc/testing';
 import type { Popover } from '@spectrum-web-components/popover';
 import '@spectrum-web-components/popover/sp-popover.js';
+import '@spectrum-web-components/tooltip/sp-tooltip.js';
+
+import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
 import {
@@ -174,4 +177,25 @@ describe('Overlay Trigger - Click', () => {
         );
         expect(el.open).to.equal('click');
     });
+
+    it('opens with a delay on click', async () => {
+        const el = await fixture<OverlayTrigger>(html`
+            <overlay-trigger placement="right-start">
+                <sp-button slot="trigger" variant="primary"></sp-button>
+                <sp-tooltip
+                    slot="click-content"
+                    id="content"
+                    delayed
+                ></sp-tooltip>
+            </overlay-trigger>
+        `);
+        const start = performance.now();
+        const opened = oneEvent(el, 'sp-opened');
+
+        el.setAttribute('open', 'click');
+        await opened;
+
+        const end = performance.now();
+        expect(end - start).to.be.greaterThan(1000);
+    });
 });