feat(textarea component): Enable control+enter form submission from w…

…ithin a text area [WD-10959] (#1095)

Signed-off-by: Nkeiruka <[email protected]>

src/components/Textarea/Textarea.stories.mdx

@@ -61,6 +61,7 @@ The Textarea component defines a multi-line text input control.
       id: "textarea2",
       rows: "3",
       defaultValue: "Ubuntu",
+      onControlEnter: () => {alert("onControlEnter() successfully called.")}
     }}
   >
     {Template.bind({})}

src/components/Textarea/Textarea.test.tsx

@@ -51,4 +51,40 @@ describe("Textarea ", () => {
     rerender(<Textarea value={testValue} />);
     expect(textarea).toHaveValue("");
   });
+
+  it("adds Ctrl + Enter keydown event listener on mount and removes on unmount", async () => {
+    const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+    const removeEventListenerSpy = jest.spyOn(document, "removeEventListener");
+
+    const { unmount } = render(
+      <Textarea
+        onControlEnter={() => {
+          console.log("OnControlEnter was here.");
+        }}
+      />
+    );
+
+    // Capture the event handler
+    const [event, handler] = addEventListenerSpy.mock.calls[0];
+
+    // Assert that addEventListener was called with the correct event type and handler
+    expect(event).toBe("keydown");
+    expect(typeof handler).toBe("function");
+
+    const keyboardCombo = new KeyboardEvent("keydown", {
+      key: "Enter",
+      ctrlKey: true,
+    });
+    document.dispatchEvent(keyboardCombo);
+
+    // Unmount the component to trigger cleanup
+    unmount();
+
+    // Assert that removeEventListener was called with the same event type and handler
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("keydown", handler);
+
+    // Clean up: restore the original implementations
+    addEventListenerSpy.mockRestore();
+    removeEventListenerSpy.mockRestore();
+  });
 });

src/components/Textarea/Textarea.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import React, {
+  useCallback,
   useEffect,
   useId,
   useLayoutEffect,
@@ -69,6 +70,10 @@ export type Props = PropsWithSpread<
      * Optional class(es) to pass to the wrapping Field component
      */
     wrapperClassName?: string;
+    /**
+     * Function to occur on keyboard event, 'CTRL + Enter'
+     */
+    onControlEnter?: () => void;
   },
   TextareaHTMLAttributes<HTMLTextAreaElement>
 >;
@@ -83,6 +88,7 @@ const Textarea = ({
   label,
   labelClassName,
   onKeyUp,
+  onControlEnter,
   required,
   stacked,
   style,
@@ -99,6 +105,27 @@ const Textarea = ({
   const defaultTextAreaId = useId();
   const textAreaId = id || defaultTextAreaId;
 
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (
+        event.key === "Enter" &&
+        (event.ctrlKey || event.metaKey) &&
+        document.activeElement === textareaRef.current
+      ) {
+        onControlEnter();
+      }
+    },
+    [onControlEnter]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     if (takeFocus) {
       textareaRef.current.focus();