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

nextui-org · Jul 15, 2024 · 045d63f · 045d63f
1 parent b762141
commit 045d63f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/components/input/src/textarea.tsx b/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>
         );
       }

diff --git a/packages/components/input/stories/textarea.stories.tsx b/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"),
+  },
+};