fix: sync TextArea character count with controlled value prop changes

[barakgoren]

When the value prop changes externally (controlled component), the character count was not being updated. Added a useEffect to keep the character count in sync with the value prop.

Closes #3251

• I have read the Contribution Guide for this project.

Resolves #3251

[qodo-free-for-open-source-projects]

Review Summary by Qodo

Sync TextArea character count with controlled value prop

🐞 Bug fix

Walkthroughs

Description

• Syncs character count with controlled value prop changes
• Adds useEffect hook to update count on external value updates
• Fixes issue where character count wasn't reflecting prop changes

Diagram

flowchart LR
  A["value prop changes"] -- "triggers useEffect" --> B["setCharacterCount updated"]
  B -- "reflects in UI" --> C["character count synced"]

Loading

File Changes

1. packages/core/src/components/TextArea/TextArea.tsx 🐞 Bug fix +5/-1

Add useEffect to sync character count with value prop

• Added useEffect import to React imports
• Implemented useEffect hook that updates characterCount state whenever value prop changes
• Effect dependency array includes value to trigger on prop updates
• Maintains existing onChange handler behavior for user input

packages/core/src/components/TextArea/TextArea.tsx

---

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0) 📐 Spec deviations (0)

1. Missing controlled sync test 🐞 Bug ⚙ Maintainability

Description

The new useEffect syncs characterCount from the controlled value prop, but there is no unit
test that rerenders TextArea with a new value while showCharCount is enabled, so regressions
in this fix would not be caught.

Code

packages/core/src/components/TextArea/TextArea.tsx[R53-55]

+    useEffect(() => {
+      setCharacterCount(value?.length || 0);
+    }, [value]);

Evidence

The PR adds a value-driven synchronization (useEffect sets characterCount from value.length).
Existing TextArea character count tests cover typing/onChange behavior, but none validate that the
displayed count updates when the parent changes value via rerender while showCharCount is true.

packages/core/src/components/TextArea/TextArea.tsx[50-63]
packages/core/src/components/TextArea/tests/TextArea.test.tsx[105-166]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
A new effect syncs `characterCount` from the controlled `value` prop, but there’s no test asserting that `showCharCount` updates when `value` changes via rerender.

### Issue Context
This PR is explicitly fixing controlled-value sync (#3251). Without a rerender-based test, future refactors can reintroduce the stale character count bug.

### Fix Focus Areas
- packages/core/src/components/TextArea/__tests__/TextArea.test.tsx[105-166]
- packages/core/src/components/TextArea/TextArea.tsx[50-63]

### Suggested test cases
1. Render with `showCharCount` and a controlled value:
  - `render(<TextArea showCharCount value="abc" />)`
  - assert `screen.getByText("3")` (or `"3/10"` if you also pass `maxLength={10}`)
2. Rerender with a different value:
  - `rerender(<TextArea showCharCount value="abcd" />)`
  - assert updated count `"4"`
3. Optionally rerender to empty string:
  - `rerender(<TextArea showCharCount value="" />)`
  - assert `"0"`

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more