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

… component is appended to the DOM (#9373) **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.
Esri · May 21, 2024 · 34a2bbe · 34a2bbe
1 parent c5f64ec
commit 34a2bbe
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -2036,6 +2036,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -2380,6 +2381,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -2552,6 +2554,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -9792,6 +9795,7 @@ declare namespace LocalJSX {
         "autocomplete"?: string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus"?: boolean;
         /**
@@ -10149,6 +10153,7 @@ declare namespace LocalJSX {
         "autocomplete"?: string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus"?: boolean;
         /**
@@ -10323,6 +10328,7 @@ declare namespace LocalJSX {
         "autocomplete"?: string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus"?: boolean;
         /**

diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/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();
+  });
 });
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/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();