fix(tray): only allow "click" events when they "pointerdown"ed on the…

… Underlay
adobe · Feb 8, 2024 · 858750c · 858750c
1 parent 4ff403e
commit 858750c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/packages/dialog/src/DialogBase.ts b/packages/dialog/src/DialogBase.ts
@@ -183,7 +183,7 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
                 ? html`
                       <sp-underlay
                           ?open=${this.open}
-                          @click=${this.dismiss}
+                          @close=${this.dismiss}
                           @transitionrun=${this.handleTransitionEvent}
                           @transitionend=${this.handleUnderlayTransitionend}
                           @transitioncancel=${this.handleTransitionEvent}

diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts
@@ -123,7 +123,7 @@ export class Tray extends SpectrumElement {
         return html`
             <sp-underlay
                 ?open=${this.open}
-                @click=${this.close}
+                @close=${this.close}
                 @transitionend=${this.handleUnderlayTransitionend}
             ></sp-underlay>
             <div

diff --git a/packages/underlay/src/Underlay.ts b/packages/underlay/src/Underlay.ts
@@ -22,16 +22,40 @@ import styles from './underlay.css.js';
 
 /**
  * @element sp-underlay
+ *
+ * @fires close - When the underlay is "clicked" and the consuming pattern should chose whether to close based on that interaction
  */
 export class Underlay extends SpectrumElement {
     public static override get styles(): CSSResultArray {
         return [styles];
     }
 
+    private canClick = false;
+
     @property({ type: Boolean, reflect: true })
     public open = false;
 
+    public override click(): void {
+        this.dispatchEvent(new Event('close'));
+    }
+
+    protected handlePointerdown(): void {
+        this.canClick = true;
+    }
+
+    protected handlePointerup(): void {
+        if (this.canClick) {
+            this.dispatchEvent(new Event('close'));
+        }
+        this.canClick = false;
+    }
+
     protected override render(): TemplateResult {
         return html``;
     }
+
+    protected override firstUpdated(): void {
+        this.addEventListener('pointerdown', this.handlePointerdown);
+        this.addEventListener('pointerup', this.handlePointerup);
+    }
 }
diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts
@@ -341,7 +341,7 @@ export class LayoutElement extends LitElement {
                       <sp-underlay
                           class="scrim"
                           ?open=${this.settings}
-                          @click=${this.toggleSettings}
+                          @close=${this.toggleSettings}
                           ?hidden=${!this.isNarrow}
                       ></sp-underlay>
                       <aside

diff --git a/projects/documentation/src/components/side-nav.ts b/projects/documentation/src/components/side-nav.ts
@@ -75,7 +75,7 @@ export class SideNav extends LitElement {
         return html`
             <sp-underlay
                 class="scrim"
-                @click=${this.toggle}
+                @close=${this.toggle}
                 ?open=${this.open}
             ></sp-underlay>
             <aside>