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.

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

@@ -292,12 +292,11 @@ export class Popover
     this.setFilteredPlacements();
     connectLocalized(this);
     connectMessages(this);
-    this.setUpReferenceElement(this.hasLoaded);
     connectFocusTrap(this);
 
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
+    // we set up the ref element in the next frame to ensure PopoverManager
+    // event handlers are invoked after connect (mainly for `components` output target)
+    requestAnimationFrame(() => this.setUpReferenceElement(this.hasLoaded));
   }
 
   async componentWillLoad(): Promise<void> {
@@ -310,6 +309,10 @@ export class Popover
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
+
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
     this.hasLoaded = true;
   }