chore: separate showCharCount and maxLength display from eachother (s…

…ame as TextFiedl)
mondaycom · Nov 6, 2024 · f82c621 · f82c621
1 parent bf50cc7
commit f82c621
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/packages/core/src/components/TextArea/TextArea.tsx b/packages/core/src/components/TextArea/TextArea.tsx
@@ -40,10 +40,13 @@ const TextArea = forwardRef(
 
     const [characterCount, setCharacterCount] = useState(rest.value?.length || 0);
 
-    const handleOnChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setCharacterCount(event.target.value.length);
-      onChange?.(event);
-    }, [onChange]);
+    const handleOnChange = useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setCharacterCount(event.target.value.length);
+        onChange?.(event);
+      },
+      [onChange]
+    );
 
     return (
       <div
@@ -84,7 +87,12 @@ const TextArea = forwardRef(
               {helpText}
             </Text>
           )}
-          {maxLength && showCharCount && <div className={cx(styles.limitText)}>{characterCount}/{maxLength}</div>}
+          {showCharCount && (
+            <div className={cx(styles.limitText)}>
+              {characterCount}
+              {maxLength && `/${maxLength}`}
+            </div>
+          )}
         </div>
       </div>
     );

diff --git a/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -107,6 +107,11 @@ describe("TextArea", () => {
       expect(screen.queryByText("0/")).not.toBeInTheDocument();
     });
 
+    it("it only shows character count with showCharCount and no MaxLength", () => {
+      render(<TextArea showCharCount />);
+      expect(screen.queryByText("0")).toBeInTheDocument();
+    });
+
     it("should not show character count when only maxLength is provided", () => {
       render(<TextArea maxLength={5} />);
       expect(screen.queryByText("0/5")).not.toBeInTheDocument();