diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts index effee38dd1..50b397f0b8 100644 --- 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`