fix(text-area): fix error caused by internal measuring on disconnect (#11751)

Author: jcfranco

packages/calcite-components/src/components/text-area/resources.ts

@@ -27,3 +27,5 @@ export const SLOTS = {
 };
 
 export const RESIZE_TIMEOUT = 100;
+
+export const NO_DIMENSIONS = Object.freeze({ height: 0, width: 0 });

packages/calcite-components/src/components/text-area/text-area.e2e.ts

@@ -14,6 +14,7 @@ import {
   themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { newProgrammaticE2EPage } from "../../tests/utils";
 import { CSS } from "./resources";
 
 describe("calcite-text-area", () => {
@@ -214,6 +215,33 @@ describe("calcite-text-area", () => {
     });
   });
 
+  it("does not throw when removed early in the cycle (#11514)", async () => {
+    async function runTest(): Promise<void> {
+      const page = await newProgrammaticE2EPage();
+      await page.evaluate(async () => {
+        await new Promise<void>((resolve) => {
+          const textArea = document.createElement("calcite-text-area");
+          let firstResize = false;
+          const resizeObserver = new ResizeObserver(async () => {
+            if (!firstResize) {
+              firstResize = true;
+              return;
+            }
+
+            resizeObserver.disconnect();
+            textArea.remove();
+            resolve();
+          });
+          document.body.append(textArea);
+          resizeObserver.observe(textArea);
+        });
+      });
+      await page.waitForChanges();
+    }
+
+    await expect(runTest()).resolves.toBeUndefined();
+  });
+
   describe("translation support", () => {
     t9n("calcite-text-area");
   });

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

@@ -38,7 +38,7 @@ import { useT9n } from "../../controllers/useT9n";
 import type { Label } from "../label/label";
 import { CharacterLengthObj } from "./interfaces";
 import T9nStrings from "./assets/t9n/messages.en.json";
-import { CSS, IDS, SLOTS, RESIZE_TIMEOUT } from "./resources";
+import { CSS, IDS, NO_DIMENSIONS, RESIZE_TIMEOUT, SLOTS } from "./resources";
 import { styles } from "./text-area.scss";
 
 declare global {
@@ -402,12 +402,13 @@ export class TextArea
     footerHeight: number;
     footerWidth: number;
   } {
-    const { height: textAreaHeight, width: textAreaWidth } =
-      this.textAreaEl.getBoundingClientRect();
+    const { height: textAreaHeight, width: textAreaWidth } = this.textAreaEl
+      ? this.textAreaEl.getBoundingClientRect()
+      : NO_DIMENSIONS;
     const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
     const { height: footerHeight, width: footerWidth } = this.footerEl.value
       ? this.footerEl.value.getBoundingClientRect()
-      : { height: 0, width: 0 };
+      : NO_DIMENSIONS;
 
     return {
       textAreaHeight,