diff --git a/.changeset/eight-coats-read.md b/.changeset/eight-coats-read.md new file mode 100644 index 00000000000..870a410bdc9 --- /dev/null +++ b/.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. diff --git a/1st-gen/packages/overlay/src/overlay-trigger-directive.ts b/1st-gen/packages/overlay/src/overlay-trigger-directive.ts index 09f35a539a9..d3145c06da7 100644 --- a/1st-gen/packages/overlay/src/overlay-trigger-directive.ts +++ b/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); diff --git a/1st-gen/packages/overlay/stories/overlay-directive.stories.ts b/1st-gen/packages/overlay/stories/overlay-directive.stories.ts index 4a3e123d6ed..e5696e7e8bc 100644 --- a/1st-gen/packages/overlay/stories/overlay-directive.stories.ts +++ b/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`