fix(overlay): set listenerHost correctly in trigger directive

Author: TarunAdobe

.changeset/eight-coats-read.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/overlay': patch
+---
+
+Sets this.listenerHost = this.target in overlay-trigger-directive’s overridden update() when a listenerHost is not already defined. This prevents type errors during the reconnected flow when listenerHost is required but unset.

1st-gen/packages/overlay/src/overlay-trigger-directive.ts

@@ -90,6 +90,7 @@ export class OverlayTriggerDirective extends SlottableRequestDirective {
             this.target = part.element as HTMLElement;
             newTarget = true;
         }
+        this.listenerHost = this.target;
         if (newTarget || newStrategy) {
             this.strategy?.abort();
             this.strategy = new strategies[

1st-gen/packages/overlay/test/overlay-trigger-directive.test.ts

@@ -10,7 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing';
+import {
+    elementUpdated,
+    expect,
+    fixture,
+    nextFrame,
+    oneEvent,
+} from '@open-wc/testing';
 import { html, TemplateResult } from '@spectrum-web-components/base';
 import { stub } from 'sinon';
 import { trigger } from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';
@@ -20,6 +26,9 @@ import '@spectrum-web-components/dialog/sp-dialog.js';
 import '@spectrum-web-components/slider/sp-slider.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
+import { LitElement } from '@spectrum-web-components/base';
+import { cache } from 'lit/directives/cache.js';
+import { Button } from '@spectrum-web-components/button';
 
 describe('Overlay trigger directive', () => {
     describe('dev mode', () => {
@@ -88,4 +97,81 @@ describe('Overlay trigger directive', () => {
             });
         });
     });
+
+    it('does not throw when directive reconnects before overlay exists', async function () {
+        // Define a test component that uses cache() to trigger reconnection.
+        class CachedOverlayTriggerTest extends LitElement {
+            private show = true;
+
+            protected override render(): TemplateResult {
+                const cachedButton = html`
+                    <sp-button
+                        ${trigger(
+                            () => html`
+                                <sp-popover>
+                                    <sp-dialog no-divider>
+                                        Cached popover
+                                    </sp-dialog>
+                                </sp-popover>
+                            `,
+                            { triggerInteraction: 'click' }
+                        )}
+                    >
+                        Cached Trigger
+                    </sp-button>
+                `;
+
+                return html`
+                    <sp-button
+                        @click=${() => {
+                            this.show = !this.show;
+                            this.requestUpdate();
+                        }}
+                    >
+                        Toggle cached host
+                    </sp-button>
+                    ${cache(this.show ? cachedButton : html``)}
+                `;
+            }
+        }
+        customElements.define(
+            'cached-overlay-trigger-test',
+            CachedOverlayTriggerTest
+        );
+
+        const wrapper = await fixture<CachedOverlayTriggerTest>(html`
+            <cached-overlay-trigger-test></cached-overlay-trigger-test>
+        `);
+        await elementUpdated(wrapper);
+
+        const shadowRoot = wrapper.shadowRoot as ShadowRoot;
+        const toggleButton = shadowRoot.querySelector('sp-button') as Button;
+        expect(toggleButton).to.exist;
+
+        // Get the cached trigger button (initially visible).
+        let cachedTrigger = shadowRoot.querySelectorAll(
+            'sp-button'
+        )[1] as Button;
+        expect(cachedTrigger, 'cached trigger should exist initially').to.exist;
+
+        // Toggle off to disconnect the cached button.
+        toggleButton.click();
+        await nextFrame();
+        await elementUpdated(wrapper);
+
+        // Toggle back on to reconnect the cached button.
+        toggleButton.click();
+        await nextFrame();
+        await elementUpdated(wrapper);
+
+        // Get the reconnected cached trigger button.
+        cachedTrigger = shadowRoot.querySelectorAll('sp-button')[1] as Button;
+        expect(cachedTrigger, 'cached trigger should exist after toggle').to
+            .exist;
+
+        // Now click the cached trigger to open the overlay.
+        const opened = oneEvent(cachedTrigger, 'sp-opened');
+        cachedTrigger.click();
+        await opened;
+    });
 });