feat(text-area): add limitText prop to prevent input beyond max-length

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

@@ -147,21 +147,27 @@ describe("calcite-text-area", () => {
     expect(inputEventSpy).not.toHaveReceivedEvent();
   });
 
-  it("should be able to enter characters beyond max-length", async () => {
-    const page = await newE2EPage();
-    await page.setContent("<calcite-text-area></calcite-text-area>");
+  describe("max-length", () => {
+    const inputText = "rocky mountains";
+    async function testMaxLength(pageContent: string, inputText: string, expectedValue: string): Promise<void> {
+      const page = await newE2EPage();
+      await page.setContent(pageContent);
+      const element = await page.find("calcite-text-area");
 
-    const element = await page.find("calcite-text-area");
-    element.setAttribute("max-length", "5");
-    await page.waitForChanges();
+      await element.callMethod("setFocus");
+      await page.keyboard.type(inputText);
+      await page.waitForChanges();
 
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe(expectedValue);
+    }
 
-    await page.keyboard.type("rocky mountains");
-    await page.waitForChanges();
+    it("should be able to enter characters beyond max-length by default", async () => {
+      await testMaxLength("<calcite-text-area max-length='5'></calcite-text-area>", inputText, inputText);
+    });
 
-    expect(await element.getProperty("value")).toBe("rocky mountains");
+    it("can follow native max-length behavior and restrict input", async () => {
+      await testMaxLength("<calcite-text-area limit-text max-length='5'></calcite-text-area>", inputText, "rocky");
+    });
   });
 
   it("should have footer--slotted class when slotted at both start and end", async () => {

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

@@ -161,6 +161,11 @@ export class TextArea
   /** Accessible name for the component. */
   @property() label: string;
 
+  /**
+   * When `true`, prevents input beyond the maximum length, mimicking native `<textarea>` behavior.
+   */
+  @property() limitText = false;
+
   /**
    * When the component resides in a form,
    * specifies the maximum number of characters allowed.
@@ -462,6 +467,7 @@ export class TextArea
           }}
           cols={this.columns}
           disabled={this.disabled}
+          maxLength={this.limitText ? this.maxLength : -1}
           name={this.name}
           onChange={this.handleChange}
           onInput={this.handleInput}