fix(combobox, dropdown, input-date-picker, popover, tooltip): fix ini…

…tialization logic in components output target (#9470)

**Related Issue:** #9468

## Summary

#9443 introduced a
regression caused by using the `componentOnLoad` util to consolidate
initialization logic shared between `connectedCallback` and
`componentDidLoad`. The util appears to resolve at a different time in
the `components` output target, which messed up with initialization of
certain components.

**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/combobox/combobox.tsx

@@ -463,7 +463,7 @@ export class Combobox
   //
   // --------------------------------------------------------------------------
 
-  async connectedCallback(): Promise<void> {
+  connectedCallback(): void {
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -483,9 +483,7 @@ export class Combobox
       onToggleOpenCloseComponent(this);
     }
 
-    await componentOnReady(this.el);
     connectFloatingUI(this, this.referenceEl, this.floatingEl);
-    afterConnectDefaultValueSet(this, this.getValue());
   }
 
   async componentWillLoad(): Promise<void> {
@@ -496,6 +494,8 @@ export class Combobox
   }
 
   componentDidLoad(): void {
+    afterConnectDefaultValueSet(this, this.getValue());
+    connectFloatingUI(this, this.referenceEl, this.floatingEl);
     setComponentLoaded(this);
   }
 

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

@@ -43,7 +43,6 @@ import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale } from "../interfaces";
-import { componentOnReady } from "../../utils/component";
 import { ItemKeyboardEvent } from "./interfaces";
 import { SLOTS } from "./resources";
 
@@ -198,7 +197,7 @@ export class Dropdown
   //
   //--------------------------------------------------------------------------
 
-  async connectedCallback(): Promise<void> {
+  connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     if (this.open) {
@@ -207,8 +206,6 @@ export class Dropdown
     }
     connectInteractive(this);
     this.updateItems();
-
-    await componentOnReady(this.el);
     connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
@@ -218,6 +215,7 @@ export class Dropdown
 
   componentDidLoad(): void {
     setComponentLoaded(this);
+    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
   componentDidRender(): void {

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

@@ -85,7 +85,7 @@ import {
   FocusTrapComponent,
 } from "../../utils/focusTrapComponent";
 import { guid } from "../../utils/guid";
-import { componentOnReady, getIconScale } from "../../utils/component";
+import { getIconScale } from "../../utils/component";
 import { Status } from "../interfaces";
 import { Validation } from "../functional/Validation";
 import { syncHiddenFormInput } from "../input/common/input";
@@ -462,7 +462,7 @@ export class InputDatePicker
   //
   // --------------------------------------------------------------------------
 
-  async connectedCallback(): Promise<void> {
+  connectedCallback(): void {
     connectInteractive(this);
     connectLocalized(this);
 
@@ -509,9 +509,7 @@ export class InputDatePicker
       onToggleOpenCloseComponent(this);
     }
 
-    await componentOnReady(this.el);
     connectFloatingUI(this, this.referenceEl, this.floatingEl);
-    this.localizeInputValues();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -523,6 +521,8 @@ export class InputDatePicker
 
   componentDidLoad(): void {
     setComponentLoaded(this);
+    this.localizeInputValues();
+    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
   disconnectedCallback(): void {

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

@@ -55,7 +55,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { FloatingArrow } from "../functional/FloatingArrow";
-import { componentOnReady, getIconScale } from "../../utils/component";
+import { getIconScale } from "../../utils/component";
 import PopoverManager from "./PopoverManager";
 import { PopoverMessages } from "./assets/popover/t9n";
 import { ARIA_CONTROLS, ARIA_EXPANDED, CSS, defaultPopoverPlacement } from "./resources";
@@ -278,6 +278,8 @@ export class Popover
 
   transitionEl: HTMLDivElement;
 
+  hasLoaded = false;
+
   focusTrap: FocusTrap;
 
   // --------------------------------------------------------------------------
@@ -286,13 +288,11 @@ export class Popover
   //
   // --------------------------------------------------------------------------
 
-  async connectedCallback(): Promise<void> {
+  connectedCallback(): void {
     this.setFilteredPlacements();
     connectLocalized(this);
     connectMessages(this);
-
-    await componentOnReady(this.el);
-    this.setUpReferenceElement();
+    this.setUpReferenceElement(this.hasLoaded);
     connectFocusTrap(this);
 
     if (this.open) {
@@ -307,6 +307,10 @@ export class Popover
 
   componentDidLoad(): void {
     setComponentLoaded(this);
+    if (this.referenceElement && !this.effectiveReferenceElement) {
+      this.setUpReferenceElement();
+    }
+    this.hasLoaded = true;
   }
 
   disconnectedCallback(): void {

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

@@ -27,7 +27,6 @@ import {
 import { guid } from "../../utils/guid";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { FloatingArrow } from "../functional/FloatingArrow";
-import { componentOnReady } from "../../utils/component";
 import { ARIA_DESCRIBED_BY, CSS } from "./resources";
 import TooltipManager from "./TooltipManager";
 import { getEffectiveReferenceElement } from "./utils";
@@ -147,6 +146,8 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   guid = `calcite-tooltip-${guid()}`;
 
+  hasLoaded = false;
+
   openTransitionProp = "opacity";
 
   transitionEl: HTMLDivElement;
@@ -157,10 +158,8 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   //
   // --------------------------------------------------------------------------
 
-  async connectedCallback(): Promise<void> {
-    await componentOnReady(this.el);
+  connectedCallback(): void {
     this.setUpReferenceElement(true);
-
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
@@ -172,6 +171,13 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
     }
   }
 
+  componentDidLoad(): void {
+    if (this.referenceElement && !this.effectiveReferenceElement) {
+      this.setUpReferenceElement();
+    }
+    this.hasLoaded = true;
+  }
+
   disconnectedCallback(): void {
     this.removeReferences();
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);