From f82c621077f97140ba9ebe09d71f849edb86724e Mon Sep 17 00:00:00 2001
From: Floris List <florisli@monday.com>
Date: Wed, 6 Nov 2024 10:16:41 +0000
Subject: [PATCH] chore: separate showCharCount and maxLength display from
 eachother (same as TextFiedl)

---
 .../core/src/components/TextArea/TextArea.tsx  | 18 +++++++++++++-----
 .../TextArea/__tests__/TextArea.test.tsx       |  5 +++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/TextArea/TextArea.tsx b/packages/core/src/components/TextArea/TextArea.tsx
index eee4343310..db2e86f9f6 100644
--- 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
index 90363795f6..ad854b1cd1 100644
--- 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();