fix(overlay): default listenerHost to target in overlay-trigger-directive #5873
Conversation
🦋 Changeset detectedLatest commit: 0477afd The changes in this PR will be included in the next version bump. This PR includes changesets to release 78 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📚 Branch Preview🔍 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
TarunAdobe
force-pushed
the
ttomar/trigger-directive
branch
from
b089a7b to
678b431
Compare
Rajdeepc
left a comment
Rajdeepc
left a comment
There was a problem hiding this comment.
LGTM! Thanks for bringing this in!
| // Now click the cached trigger to open the overlay. | ||
| const opened = oneEvent(cachedTrigger, 'sp-opened'); | ||
| cachedTrigger.click(); | ||
| await opened; |
There was a problem hiding this comment.
can we add some assertions after this to confirm the popover is rendered?
| this.target = part.element as HTMLElement; | ||
| newTarget = true; | ||
| } | ||
| this.listenerHost = this.target; |
There was a problem hiding this comment.
are we sure this is the correct default? im trying to understand the override but the strategies and controller complexity is making my brain warp. can we chat about this in our team meeting thursday?
There was a problem hiding this comment.
The type error occurs because this.listenerHost is undefined when reconnected() → init() runs before the overlay is ready.
This happens because the parent class sets this.listenerHost = this.target in update(), child class overrides update() but only sets this.listenerHost inside the async handleOverlayReady callback. If reconnection happens before the overlay exists → this.listenerHost is undefined and it will error out.
this.listenerHost = this.target is not architecturally correct coz the slottable-request event is dispatched from the overlay element with bubbles: false.
Attaching the listener to this.target (the trigger button) means it will never receive the event since it doesn't bubble. This breaks the lazy content loading mechanism entirely.
We can override the reconnected() in the child class to guard against premature initialization, its cleaner since it's specific to the child's async overlay setup pattern.
override reconnected(): void {
// Only call init() if the overlay is ready
if (this.listenerHost) {
this.init();
}
}There was a problem hiding this comment.
good job finding a solution @Rajdeepc !!! I updated the change.
Rajdeepc
dismissed
their stale review
Revisiting coz i see the events don't bubble from parent 'slottable-requestand the listener needs to be on the overlay. there are two ways to do this, we can wait for the overlay to exist before attaching the listener or guard against callinginit()` method.
TarunAdobe
force-pushed
the
ttomar/trigger-directive
branch
from
786ae5d to
0477afd
Compare
Description
Sets
this.listenerHost = this.targetin overlay-trigger-directive’s overridden update() when a listenerHost is not already defined, mirroring the parent directive’s behavior. This prevents type errors during the reconnected flow when listenerHost is required but unset.Motivation and context
When an overlay trigger directive’s reconnected hook runs with no listenerHost set in its overridden update(), we see type/runtime errors. Aligning with the parent directive and setting
this.listenerHost = this.targetprevents these errors and keeps typing consistent with expectations when slottable-request-directive executes. The parent directive already uses this pattern; this brings overlay-trigger-directive in line.Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeatures