feat(components): add clear button to the textarea component

.changeset/five-adults-protect.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": minor
+---
+
+Add a Clear button to the textarea component (#2348)

packages/components/input/__tests__/textarea.test.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {Textarea} from "../src";
+
+describe("Textarea", () => {
+  it("should clear the value and onClear is triggered", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLTextAreaElement>();
+
+    const {getByRole} = render(
+      <Textarea
+        ref={ref}
+        defaultValue="junior@nextui.org"
+        label="test textarea"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(ref.current?.value)?.toBe("");
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+});

packages/components/input/src/textarea.tsx

@@ -3,6 +3,7 @@ import {forwardRef} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import {useMemo, useState} from "react";
 import TextareaAutosize from "react-textarea-autosize";
+import {CloseFilledIcon} from "@nextui-org/shared-icons";
 
 import {UseInputProps, useInput} from "./use-input";
 
@@ -88,6 +89,8 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       getHelperWrapperProps,
       getDescriptionProps,
       getErrorMessageProps,
+      isClearable,
+      getClearButtonProps,
     } = useInput<HTMLTextAreaElement>({...otherProps, ref, isMultiline: true});
 
     const [hasMultipleRows, setIsHasMultipleRows] = useState(minRows > 1);
@@ -122,13 +125,21 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       />
     );
 
+    const end = useMemo(() => {
+      if (isClearable) {
+        return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>;
+      }
+
+      return endContent;
+    }, [isClearable, getClearButtonProps]);
+
     const innerWrapper = useMemo(() => {
-      if (startContent || endContent) {
+      if (startContent || end) {
         return (
           <div {...getInnerWrapperProps()}>
             {startContent}
             {content}
-            {endContent}
+            {end}
           </div>
         );
       }

packages/components/input/stories/textarea.stories.tsx

@@ -302,3 +302,15 @@ export const IsInvalid = {
     errorMessage: "Please enter a valid description",
   },
 };
+
+export const Clearable = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    placeholder: "Enter your description",
+    defaultValue: "junior@nextui.org",
+    // eslint-disable-next-line no-console
+    onClear: () => console.log("textarea cleared"),
+  },
+};