fix(combobox): fix error that occurs when a click is emitted when the…

… component is appended to the DOM (#9380)

**Related Issue:** #9321

## Summary

This fixes an issue where references to internal elements were undefined
in the window-level click handler. This would happen because the window
click handler was added when the component was connected, but before its
internals were rendered.

Co-authored-by: JC Franco <jfranco@esri.com>

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -15,7 +15,7 @@ import {
 import { html } from "../../../support/formatting";
 import { CSS as ComboboxItemCSS } from "../combobox-item/resources";
 import { CSS as XButtonCSS } from "../functional/XButton";
-import { getElementXY, skipAnimations } from "../../tests/utils";
+import { getElementXY, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
 import { CSS } from "./resources";
 
 const selectionModes = ["single", "single-persist", "ancestors", "multiple"];
@@ -2020,4 +2020,14 @@ describe("calcite-combobox", () => {
 
     expect(await combobox.getProperty("open")).toBe(false);
   });
+
+  it("does not throw an error when a click emits on connect (#9321)", async () => {
+    const page = await newProgrammaticE2EPage();
+    await page.evaluate(async () => {
+      const combobox = document.createElement("calcite-combobox");
+      document.body.click();
+      document.body.append(combobox);
+    });
+    await page.waitForChanges();
+  });
 });

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

@@ -64,8 +64,8 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Scale, SelectionMode, Status } from "../interfaces";
-import { XButton, CSS as XButtonCSS } from "../functional/XButton";
-import { getIconScale } from "../../utils/component";
+import { CSS as XButtonCSS, XButton } from "../functional/XButton";
+import { componentOnReady, getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
 import { ComboboxMessages } from "./assets/combobox/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./interfaces";
@@ -343,16 +343,12 @@ export class Combobox
   //--------------------------------------------------------------------------
 
   @Listen("click", { target: "document" })
-  documentClickHandler(event: PointerEvent): void {
-    if (this.disabled) {
+  async documentClickHandler(event: PointerEvent): Promise<void> {
+    if (this.disabled || event.composedPath().includes(this.el)) {
       return;
     }
 
-    const composedPath = event.composedPath();
-
-    if (composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
-      return;
-    }
+    await componentOnReady(this.el);
 
     if (!this.allowCustomValues && this.textInput.value) {
       this.clearInputValue();