fix(action-bar, color-picker, combobox, filter, list, text-area): cancel debounced and throttled functions

packages/calcite-components/src/components/action-bar/action-bar.e2e.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import { html } from "../../../support/formatting";
 import {
   accessible,
+  debounceCancelled,
   defaults,
   delegatesToFloatingUiOwningComponent,
   focusable,
@@ -70,6 +71,10 @@ describe("calcite-action-bar", () => {
     ]);
   });
 
+  describe("debounceCancelled", () => {
+    debounceCancelled("calcite-action-bar");
+  });
+
   describe("delegates to floating-ui-owner component", () => {
     delegatesToFloatingUiOwningComponent(
       html`<calcite-action-bar>

packages/calcite-components/src/components/action-bar/action-bar.tsx

@@ -248,6 +248,7 @@ export class ActionBar extends LitElement implements LoadableComponent {
   override disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
+    this.resize.cancel();
   }
 
   // #endregion

packages/calcite-components/src/components/color-picker/color-picker.tsx

@@ -459,6 +459,7 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
       "pointerup",
       this.globalPointerUpHandler,
     ) /* TODO: [MIGRATION] If possible, refactor to use on* JSX prop or this.listen()/this.listenOn() utils - they clean up event listeners automatically, thus prevent memory leaks */;
+    this.drawColorControls.cancel();
   }
 
   // #endregion

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

@@ -2,6 +2,7 @@ import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppete
 import { describe, expect, it, beforeEach } from "vitest";
 import {
   accessible,
+  debounceCancelled,
   defaults,
   disabled,
   hidden,
@@ -127,6 +128,10 @@ describe("calcite-combobox", () => {
     ]);
   });
 
+  describe("debounceCancelled", () => {
+    debounceCancelled("calcite-combobox");
+  });
+
   describe("honors hidden attribute", () => {
     hidden("calcite-combobox");
   });

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

@@ -120,11 +120,20 @@ export class Combobox
 
   private emitComboboxChange = debounce(this.internalComboboxChangeEvent, 0);
 
-  private filterItems = (() => {
+  private filterItems(text: string, setOpenToEmptyState = false, emit = true): void {
     const find = (item: ComboboxChildElement, filteredData: ItemData[]) =>
       item && filteredData.some(({ el }) => item === el);
 
-    return debounce((text: string, setOpenToEmptyState = false, emit = true): void => {
+    this.filter(find, text, setOpenToEmptyState, emit);
+  }
+
+  private filter = debounce(
+    (
+      find: (item: ComboboxChildElement, filteredData: ItemData[]) => boolean,
+      text: string,
+      setOpenToEmptyState = false,
+      emit = true,
+    ): void => {
       const filteredData = filter([...this.data, ...this.groupData], text, [
         "description",
         "label",
@@ -169,8 +178,9 @@ export class Combobox
       if (emit) {
         this.calciteComboboxFilterChange.emit();
       }
-    }, DEBOUNCE.filter);
-  })();
+    },
+    DEBOUNCE.filter,
+  );
 
   private _filterText = "";
 
@@ -625,7 +635,9 @@ export class Combobox
     this.resizeObserver?.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
+
     disconnectFloatingUI(this);
+    this.filter.cancel();
   }
 
   // #endregion

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

@@ -283,6 +283,10 @@ export class List
 
   // #region Public Methods
 
+  // #endregion
+
+  // #region Public Methods
+
   /**
    * Sets focus on the component's first focusable element.
    *
@@ -408,6 +412,7 @@ export class List
   override disconnectedCallback(): void {
     this.disconnectObserver();
     disconnectSortableComponent(this);
+    this.updateListItems.cancel();
   }
 
   // #endregion

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -324,6 +324,7 @@ export class TextArea
     disconnectLabel(this);
     disconnectForm(this);
     this.resizeObserver?.disconnect();
+    this.setHeightAndWidthToAuto.cancel();
   }
 
   // #endregion

packages/calcite-components/src/tests/commonTests/debounceCancelled.ts

@@ -0,0 +1,34 @@
+import { toHaveNoViolations } from "jest-axe";
+import { expect, it, vi, Mock } from "vitest";
+import { ComponentTestSetup } from "./interfaces";
+import { getTagAndPage } from "./utils";
+
+expect.extend(toHaveNoViolations);
+
+/**
+ * Helper for asserting that debounce has been cancelled when component is disconnected.
+ *
+ * Note that this helper should be used within a describe block.
+ *
+ * @example
+ * describe("debounceCancelled"), () => {
+ *    debounceCancelled(`<action-bar></action-bar>`);
+ * });
+ * @param {ComponentTestSetup} componentTestSetup - A component tag, html, or the tag and e2e page for setting up a test
+ */
+export function debounceCancelled(componentTestSetup: ComponentTestSetup): void {
+  it("should cancel debounced when component is disconnected", async () => {
+    const cancel = vi.fn();
+
+    vi.mock("lodash/debounce", () => (fn: { cancel: Mock<any> }) => {
+      fn.cancel = cancel;
+      return cancel;
+    });
+
+    const { page, tag } = await getTagAndPage(componentTestSetup);
+
+    await page.$eval(tag, (element: HTMLElement) => element.remove());
+
+    expect(cancel).toHaveBeenCalledTimes(1);
+  });
+}

packages/calcite-components/src/tests/commonTests/throttleCancelled.ts

@@ -0,0 +1,34 @@
+import { toHaveNoViolations } from "jest-axe";
+import { expect, it, vi, Mock } from "vitest";
+import { ComponentTestSetup } from "./interfaces";
+import { getTagAndPage } from "./utils";
+
+expect.extend(toHaveNoViolations);
+
+/**
+ * Helper for asserting that throttle has been cancelled when component is disconnected.
+ *
+ * Note that this helper should be used within a describe block.
+ *
+ * @example
+ * describe("throttleCancelled"), () => {
+ *    throttleCancelled(`<color-picker></color-picker>`);
+ * });
+ * @param {ComponentTestSetup} componentTestSetup - A component tag, html, or the tag and e2e page for setting up a test
+ */
+export function throttleCancelled(componentTestSetup: ComponentTestSetup): void {
+  it("should cancel throttle when component is disconnected", async () => {
+    const cancel = vi.fn();
+
+    vi.mock("lodash/throttle", () => (fn: { cancel: Mock<any> }) => {
+      fn.cancel = cancel;
+      return cancel;
+    });
+
+    const { page, tag } = await getTagAndPage(componentTestSetup);
+
+    await page.$eval(tag, (element: HTMLElement) => element.remove());
+
+    expect(cancel).toHaveBeenCalledTimes(1);
+  });
+}