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) => { - setCharacterCount(event.target.value.length); - onChange?.(event); - }, [onChange]); + const handleOnChange = useCallback( + (event: React.ChangeEvent) => { + setCharacterCount(event.target.value.length); + onChange?.(event); + }, + [onChange] + ); return (
)} - {maxLength && showCharCount &&
{characterCount}/{maxLength}
} + {showCharCount && ( +
+ {characterCount} + {maxLength && `/${maxLength}`} +
+ )}
); 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(