Vibe version

3.68.4

Describe the bug

Description

The TextArea component's character counter (showCharCount prop) displays 0 when the component mounts with an initial value prop. The counter only updates correctly after the user manually types in the textarea, even though the textarea already contains text.

Root Cause

The TextArea component initializes the characterCount state only once on mount:

const [characterCount, setCharacterCount] = useState(value?.length || 0);

However, there is no useEffect that watches the value prop for changes. When the value prop updates after the initial mount (e.g., when loading data from an API), the internal characterCount state remains at its initial value (0), while the textarea displays the correct text.
The characterCount state only updates through the handleOnChange callback, which requires user interaction:

const handleOnChange = useCallback(
  (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setCharacterCount(event.target.value.length);
    onChange?.(event);
  },
  [onChange]
);

Actual Behavior

The character counter displays 0 until the user manually types in the textarea, even when the textarea contains text from the value prop.

Expected behavior

The character counter should display the correct character count based on the current value prop, regardless of whether it was set on initial mount or updated later.

Steps to reproduce

1. Create a TextArea component with showCharCount={true}
2. Set the value prop to an empty string initially: value=""
3. After component mount, update the value prop to contain text (e.g., from API response or state update): value="Initial content from API"
   Observe that the character counter still shows 0 / {maxLength} instead of the actual character count

Reproduction example link

https://www.loom.com/share/babfb60b209240d5803b43ee0f2e5a0a

System Info

System:
    OS: macOS 26.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.06 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.4 - /Users/.../.nvm/versions/node/v20.19.4/bin/node
    Yarn: 1.22.22 - /Users/.../.nvm/versions/node/v20.19.4/bin/yarn
    npm: 10.8.2 - /Users/.../.nvm/versions/node/v20.19.4/bin/npm
    pnpm: 10.18.3 - /Users/.../.nvm/versions/node/v20.19.4/bin/pnpm
  Browsers:
    Brave Browser: 144.1.86.148
    Chrome: 144.0.7559.133
    Edge: 144.0.3719.115
    Firefox: 146.0.1
    Safari: 26.2

Additional context, Screenshots

No response