fix(overlay): default listenerHost to target in overlay-trigger-directive

.changeset/eight-coats-read.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/overlay': patch
+---
+
+Guards `OverlayTriggerDirective`'s `reconnected()` implementation so it only calls `init()` after an overlay instance exists. This prevents type errors during the reconnected flow when `listenerHost` would otherwise be unset because the overlay is not yet ready.

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

@@ -135,6 +135,15 @@ export class OverlayTriggerDirective extends SlottableRequestDirective {
             insertionEl.insertAdjacentElement(where, this.overlay);
         }
     }
+
+    override reconnected(): void {
+        // Do not re-initialize until an overlay instance exists.
+        // The overlay-ready callback is responsible for wiring the initial listener.
+        if (!this.overlay) {
+            return;
+        }
+        this.init();
+    }
 }
 
 export const trigger = directive(OverlayTriggerDirective);

1st-gen/packages/overlay/stories/overlay-directive.stories.ts

@@ -53,6 +53,7 @@ import './overlay-story-components.js';
 import { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { state } from '@spectrum-web-components/base/src/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 
 const storyStyles = html`
     <style>
@@ -314,7 +315,7 @@ class ManagedOverlayTrigger extends LitElement {
                 Create Overlay Render Button And Open Overlay
             </sp-button>
 
-            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}
+            ${cache(this.isRenderOverlay ? this.renderOverlayButton() : html``)}
         `;
     }
 

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;
+    });
 });