fix: (overlay): Switching back to assignedNodes instead of assignedEl…

…ements
adobe · Dec 16, 2024 · eda5a4a · eda5a4a
1 parent 3323cf9
commit eda5a4a
Showing 1 changed file with 28 additions and 28 deletions.
diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts
@@ -74,22 +74,22 @@ export class OverlayTrigger extends SpectrumElement {
     public receivesFocus: 'true' | 'false' | 'auto' = 'auto';
 
     @state()
-    private clickContent: HTMLElement | undefined;
+    private clickContent: HTMLElement[] = [];
 
     private clickPlacement?: Placement;
 
     @state()
-    private longpressContent: HTMLElement | undefined;
+    private longpressContent: HTMLElement[] = [];
 
     private longpressPlacement?: Placement;
 
     @state()
-    private hoverContent: HTMLElement | undefined;
+    private hoverContent: HTMLElement[] = [];
 
     private hoverPlacement?: Placement;
 
     @state()
-    private targetContent: HTMLElement | undefined;
+    private targetContent: HTMLElement[] = [];
 
     @query('#click-overlay', true)
     clickOverlayElement!: Overlay;
@@ -100,12 +100,11 @@ export class OverlayTrigger extends SpectrumElement {
     @query('#hover-overlay', true)
     hoverOverlayElement!: Overlay;
 
-    private getAssignedElementsFromSlot(
-        slot: HTMLSlotElement
-    ): HTMLElement | undefined {
-        return slot.assignedElements({ flatten: true })[0] as
-            | HTMLElement
-            | undefined;
+    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {
+        const nodes = slot.assignedNodes({ flatten: true });
+        return [
+            nodes.find((node) => node instanceof HTMLElement),
+        ] as HTMLElement[];
     }
 
     private handleTriggerContent(
@@ -159,22 +158,22 @@ export class OverlayTrigger extends SpectrumElement {
     protected override update(changes: PropertyValues): void {
         if (changes.has('clickContent')) {
             this.clickPlacement =
-                ((this.clickContent?.getAttribute('placement') ||
-                    this.clickContent?.getAttribute(
+                ((this.clickContent[0]?.getAttribute('placement') ||
+                    this.clickContent[0]?.getAttribute(
                         'direction'
                     )) as Placement) || undefined;
         }
         if (changes.has('hoverContent')) {
             this.hoverPlacement =
-                ((this.hoverContent?.getAttribute('placement') ||
-                    this.hoverContent?.getAttribute(
+                ((this.hoverContent[0]?.getAttribute('placement') ||
+                    this.hoverContent[0]?.getAttribute(
                         'direction'
                     )) as Placement) || undefined;
         }
         if (changes.has('longpressContent')) {
             this.longpressPlacement =
-                ((this.longpressContent?.getAttribute('placement') ||
-                    this.longpressContent?.getAttribute(
+                ((this.longpressContent[0]?.getAttribute('placement') ||
+                    this.longpressContent[0]?.getAttribute(
                         'direction'
                     )) as Placement) || undefined;
         }
@@ -190,17 +189,17 @@ export class OverlayTrigger extends SpectrumElement {
     protected renderClickOverlay(): TemplateResult {
         import('@spectrum-web-components/overlay/sp-overlay.js');
         const slot = this.renderSlot('click-content');
-        if (!this.clickContent) {
+        if (!this.clickContent.length) {
             return slot;
         }
         return html`
             <sp-overlay
                 id="click-overlay"
-                ?disabled=${this.disabled || !this.clickContent}
-                ?open=${this.open === 'click' && !!this.clickContent}
+                ?disabled=${this.disabled || !this.clickContent.length}
+                ?open=${this.open === 'click' && !!this.clickContent.length}
                 .offset=${this.offset}
                 .placement=${this.clickPlacement || this.placement}
-                .triggerElement=${this.targetContent || null}
+                .triggerElement=${this.targetContent[0]}
                 .triggerInteraction=${'click'}
                 .type=${this.type !== 'modal' ? 'auto' : 'modal'}
                 @beforetoggle=${this.handleBeforetoggle}
@@ -214,19 +213,19 @@ export class OverlayTrigger extends SpectrumElement {
     protected renderHoverOverlay(): TemplateResult {
         import('@spectrum-web-components/overlay/sp-overlay.js');
         const slot = this.renderSlot('hover-content');
-        if (!this.hoverContent) {
+        if (!this.hoverContent.length) {
             return slot;
         }
         return html`
             <sp-overlay
                 id="hover-overlay"
-                ?open=${this.open === 'hover' && !!this.hoverContent}
+                ?open=${this.open === 'hover' && !!this.hoverContent.length}
                 ?disabled=${this.disabled ||
-                !this.hoverContent ||
+                !this.hoverContent.length ||
                 (!!this.open && this.open !== 'hover')}
                 .offset=${this.offset}
                 .placement=${this.hoverPlacement || this.placement}
-                .triggerElement=${this.targetContent || null}
+                .triggerElement=${this.targetContent[0]}
                 .triggerInteraction=${'hover'}
                 .type=${'hint'}
                 @beforetoggle=${this.handleBeforetoggle}
@@ -240,17 +239,18 @@ export class OverlayTrigger extends SpectrumElement {
     protected renderLongpressOverlay(): TemplateResult {
         import('@spectrum-web-components/overlay/sp-overlay.js');
         const slot = this.renderSlot('longpress-content');
-        if (!this.longpressContent) {
+        if (!this.longpressContent.length) {
             return slot;
         }
         return html`
             <sp-overlay
                 id="longpress-overlay"
-                ?disabled=${this.disabled || !this.longpressContent}
-                ?open=${this.open === 'longpress' && !!this.longpressContent}
+                ?disabled=${this.disabled || !this.longpressContent.length}
+                ?open=${this.open === 'longpress' &&
+                !!this.longpressContent.length}
                 .offset=${this.offset}
                 .placement=${this.longpressPlacement || this.placement}
-                .triggerElement=${this.targetContent || null}
+                .triggerElement=${this.targetContent[0]}
                 .triggerInteraction=${'longpress'}
                 .type=${'auto'}
                 @beforetoggle=${this.handleBeforetoggle}