Skip to content

Commit 9ede090

Browse files
authored
fix(popover): prevent closing when component is connected to the DOM via a click (#9501)
**Related Issue:** #9504 ## Summary This fixes an issue where any clicks when the popover is connected to the DOM would cause it to be immediately closed. This would happen because `PopoverManager`'s window `click` handler was being added and invoked during `connectedCallback` and not after the component was initialized (somewhat similar to #9373). **Note**: there are no accompanying tests as this is not reproducible in the test environment, which uses the lazy-loaded output.
1 parent 48a26e3 commit 9ede090

File tree

1 file changed

+7
-4
lines changed
  • packages/calcite-components/src/components/popover

1 file changed

+7
-4
lines changed

packages/calcite-components/src/components/popover/popover.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -292,12 +292,11 @@ export class Popover
292292
this.setFilteredPlacements();
293293
connectLocalized(this);
294294
connectMessages(this);
295-
this.setUpReferenceElement(this.hasLoaded);
296295
connectFocusTrap(this);
297296

298-
if (this.open) {
299-
onToggleOpenCloseComponent(this);
300-
}
297+
// we set up the ref element in the next frame to ensure PopoverManager
298+
// event handlers are invoked after connect (mainly for `components` output target)
299+
requestAnimationFrame(() => this.setUpReferenceElement(this.hasLoaded));
301300
}
302301

303302
async componentWillLoad(): Promise<void> {
@@ -310,6 +309,10 @@ export class Popover
310309
if (this.referenceElement && !this.effectiveReferenceElement) {
311310
this.setUpReferenceElement();
312311
}
312+
313+
if (this.open) {
314+
onToggleOpenCloseComponent(this);
315+
}
313316
this.hasLoaded = true;
314317
}
315318

0 commit comments

Comments
 (0)