[Bug]: TextInput missing ref check for initial value. Causes incorrect character count when toggling enableCounter

[jose-biescas]

Package

@carbon/react

Browser

Chrome

Package version

v1.74.0

React version

v18.3.1

Description

Hi team,
I was using react-hook-form alongside the @carbon/react components, specifically TextInput and TextArea . I noticed that TextArea checks its ref for a value alongside defaultValue and value props, but TextInput does not do this. Is this intentional? In this case I am using a package (react-hook-form), and I believe the register function from this library utilizes the ref prop, something that is taken into account in TextArea but not in TextInput.

This causes for example the following behavior: https://stackblitz.com/edit/github-itebggga-lkm9xkdl?file=src%2FApp.tsx
Where TextArea has the correct character counter, but TextInput doesn't.

TextArea code (this code doesn't exist in TextInput): https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/TextArea/TextArea.tsx#L200

Reproduction/example

https://stackblitz.com/edit/github-itebggga-lkm9xkdl?file=src%2FApp.tsx

Steps to reproduce

Without react-hook-form:

1. Create a ref using React's useRef hook
2. Assign the ref to the TextInput component
3. Inside useEffect hook check if ref.current is not null, set a value to ref.current.value
   Result:
4. TextInput shows 0 character counter

With react-hook-form

1. Use useForm with defaultValues
2. Register input using the register api
   Result:
3. TextInput shows 0 character counter

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems