feat(#2492): add onblur for textarea

Author: syedszeeshan

.gitignore

@@ -67,4 +67,4 @@ devenv.local.nix
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 .cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
+.github/instructions/nx.instructions.md

libs/angular-components/src/lib/components/textarea/textarea.spec.ts

@@ -22,6 +22,7 @@ import { fireEvent } from "@testing-library/dom";
       [mb]="mb"
       [ml]="ml"
       (onChange)="onChange()"
+      (onBlur)="onBlur()"
     ></goab-textarea>
   `,
 })
@@ -46,6 +47,10 @@ class TestTextareaComponent {
   onChange() {
     /** do nothing **/
   }
+
+  onBlur() {
+    /** do nothing **/
+  }
 }
 
 describe("GoABTextArea", () => {
@@ -104,4 +109,18 @@ describe("GoABTextArea", () => {
 
     expect(onChange).toBeCalledTimes(1);
   });
+
+  it("should dispatch onBlur", () => {
+    const onBlur = jest.spyOn(component, "onBlur");
+
+    const el = fixture.nativeElement.querySelector("goa-textarea");
+    fireEvent(
+      el,
+      new CustomEvent("_blur", {
+        detail: { name: "textarea-name", value: "test value" },
+      }),
+    );
+
+    expect(onBlur).toBeCalledTimes(1);
+  });
 });

libs/angular-components/src/lib/components/textarea/textarea.ts

@@ -2,6 +2,7 @@ import {
   GoabTextAreaCountBy,
   GoabTextAreaOnChangeDetail,
   GoabTextAreaOnKeyPressDetail,
+  GoabTextAreaOnBlurDetail,
 } from "@abgov/ui-components-common";
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -41,6 +42,7 @@ import { GoabControlValueAccessor } from "../base.component";
       [attr.mr]="mr"
       (_change)="_onChange($event)"
       (_keyPress)="_onKeyPress($event)"
+      (_blur)="_onBlur($event)"
     >
     </goa-textarea>
   `,
@@ -67,6 +69,7 @@ export class GoabTextArea extends GoabControlValueAccessor {
 
   @Output() onChange = new EventEmitter<GoabTextAreaOnChangeDetail>();
   @Output() onKeyPress = new EventEmitter<GoabTextAreaOnKeyPressDetail>();
+  @Output() onBlur = new EventEmitter<GoabTextAreaOnBlurDetail>();
 
   _onChange(e: Event) {
     const detail = (e as CustomEvent<GoabTextAreaOnChangeDetail>).detail;
@@ -80,4 +83,10 @@ export class GoabTextArea extends GoabControlValueAccessor {
     this.markAsTouched();
     this.onKeyPress.emit(detail);
   }
+
+  _onBlur(e: Event) {
+    const detail = (e as CustomEvent<GoabTextAreaOnBlurDetail>).detail;
+    this.markAsTouched();
+    this.onBlur.emit(detail);
+  }
 }

libs/common/src/lib/common.ts

@@ -193,6 +193,11 @@ export type GoabTextAreaOnKeyPressDetail = {
   key: string;
 };
 
+export type GoabTextAreaOnBlurDetail = {
+  name: string;
+  value: string;
+};
+
 // Tabs
 
 export interface GoabTabsProps {

libs/react-components/specs/textarea.browser.spec.tsx

@@ -0,0 +1,60 @@
+import { render } from "vitest-browser-react";
+import { GoabTextArea, GoabInput } from "../src";
+import { expect, describe, it, vi } from "vitest";
+import { useState } from "react";
+
+describe("TextArea", () => {
+  it("should trigger onBlur event when focus leaves the textarea", async () => {
+    const onBlurSpy = vi.fn();
+
+    const Component = () => {
+      const [value, setValue] = useState("");
+
+      return (
+        <div>
+          <GoabTextArea
+            testId="test-textarea"
+            name="test-textarea"
+            value={value}
+            onChange={(detail) => setValue(detail.value)}
+            onBlur={onBlurSpy}
+          />
+          <GoabInput
+            type="text"
+            testId="focus-target"
+            name="focus-input"
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            onChange={() => {}}
+          />
+        </div>
+      );
+    };
+
+    const result = render(<Component />);
+    const textareaEl = result.getByTestId("test-textarea");
+    const inputEl = result.getByTestId("focus-target");
+
+    await vi.waitFor(async () => {
+      const textarea = textareaEl.element() as HTMLTextAreaElement;
+      expect(textarea).toBeTruthy();
+      textarea.focus();
+      textarea.value = "Test content for blur";
+    });
+
+    // Trigger blur by focusing on the input element
+    await vi.waitFor(() => {
+      const input = inputEl.element() as HTMLInputElement;
+      expect(input).toBeTruthy();
+      input.focus();
+    });
+
+    // Verify onBlur was called with correct values
+    await vi.waitFor(() => {
+      expect(onBlurSpy).toHaveBeenCalledTimes(1);
+      expect(onBlurSpy).toHaveBeenCalledWith({
+        name: "test-textarea",
+        value: "Test content for blur",
+      });
+    });
+  });
+});

libs/react-components/src/lib/textarea/textarea.tsx

@@ -2,6 +2,7 @@ import {
   GoabTextAreaCountBy,
   GoabTextAreaOnChangeDetail,
   GoabTextAreaOnKeyPressDetail,
+  GoabTextAreaOnBlurDetail,
   Margins,
 } from "@abgov/ui-components-common";
 import { useEffect, useRef, type JSX } from "react";
@@ -52,6 +53,7 @@ export interface GoabTextAreaProps extends Margins {
 
   onChange?: (event: GoabTextAreaOnChangeDetail) => void;
   onKeyPress?: (event: GoabTextAreaOnKeyPressDetail) => void;
+  onBlur?: (event: GoabTextAreaOnBlurDetail) => void;
 }
 
 export function GoabTextArea({
@@ -75,6 +77,7 @@ export function GoabTextArea({
   autoComplete,
   onChange,
   onKeyPress,
+  onBlur,
 }: GoabTextAreaProps): JSX.Element {
   const el = useRef<HTMLTextAreaElement>(null);
 
@@ -83,36 +86,32 @@ export function GoabTextArea({
       return;
     }
     const current = el.current;
-    const listener: EventListener = (e: Event) => {
-      const detail = (e as CustomEvent<GoabTextAreaOnChangeDetail>).detail;
 
+    const changeListener: EventListener = (e: Event) => {
+      const detail = (e as CustomEvent<GoabTextAreaOnChangeDetail>).detail;
       onChange?.(detail);
     };
-    if (onChange) {
-      current.addEventListener("_change", listener);
-    }
-    return () => {
-      if (onChange) {
-        current.removeEventListener("_change", listener);
-      }
-    };
-  }, [el, onChange]);
 
-  useEffect(() => {
-    if (!el.current) {
-      return;
-    }
-    const current = el.current;
     const keypressListener = (e: unknown) => {
       const detail = (e as CustomEvent<GoabTextAreaOnKeyPressDetail>).detail;
       onKeyPress?.(detail);
     };
 
+    const blurListener = (e: unknown) => {
+      const detail = (e as CustomEvent<GoabTextAreaOnBlurDetail>).detail;
+      onBlur?.(detail);
+    };
+
+    current.addEventListener("_change", changeListener);
     current.addEventListener("_keyPress", keypressListener);
+    current.addEventListener("_blur", blurListener);
+
     return () => {
+      current.removeEventListener("_change", changeListener);
       current.removeEventListener("_keyPress", keypressListener);
+      current.removeEventListener("_blur", blurListener);
     };
-  }, [el, onKeyPress]);
+  }, [el, onChange, onKeyPress, onBlur]);
 
   return (
     <goa-textarea

libs/web-components/src/components/text-area/TextArea.spec.ts

@@ -78,6 +78,28 @@ describe("GoATextArea", () => {
     });
   });
 
+  it("handles the blur event", async () => {
+    const onBlur = vi.fn();
+    const result = render(GoATextArea, {
+      name: "name",
+      value: "test value",
+      testid: "blur-test",
+    });
+
+    const textarea = result.queryByTestId("blur-test");
+    textarea.addEventListener("_blur", (e: CustomEvent) => {
+      expect(e.detail.name).toBe("name");
+      expect(e.detail.value).toBe("test value");
+      onBlur();
+    });
+
+    await fireEvent.blur(textarea);
+
+    await waitFor(() => {
+      expect(onBlur).toBeCalledTimes(1);
+    });
+  });
+
   it("can be readonly", async () => {
     const result = render(GoATextArea, {
       name: "name",

libs/web-components/src/components/text-area/TextArea.svelte

@@ -152,6 +152,15 @@
   function onFocus(_e: Event) {
     dispatch(_rootEl, "help-text::announce", undefined, { bubbles: true });
   }
+
+  function onBlur(_e: Event) {
+    dispatch(
+      _textareaEl,
+      "_blur",
+      { name, value: _textareaEl.value },
+      { bubbles: true },
+    );
+  }
 </script>
 
 <!-- HTML -->
@@ -183,6 +192,7 @@
       on:keyup={onKeyPress}
       on:change={onChange}
       on:focus={onFocus}
+      on:blur={onBlur}
     />
 
     {#if maxcount > 0 && !isDisabled}