Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: TextArea component doesn't update counter label after value is changed

See original GitHub issue

Package

carbon-components-react

Browser

Chrome

Package version

v7.59.0

React version

v16.14.0

Description

When setting the TextArea component’s value without triggering the onChange event, the characters counter is not updated.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Reproduction/example

https://codesandbox.io/s/angry-kalam-4lrr3h

Steps to reproduce

Type any random text in the TextInput. Check the TextArea.

Expected: the value and the counter label to be updated. Result: the value is updated, but the counter label still displays 0.

Code of Conduct

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

Issue Analytics

State:
Created a year ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

tay1orjonescommented, Oct 20, 2022

@renato-souzaf Thanks for reporting this, great catch! It probably just needs a useEffect to update the counter state when the value changes.

0reactions

emyarodcommented, Nov 10, 2022

i kinda understand, can u provide example?

were you able to try the example I provided in the previous comment?

Top Results From Across the Web

How do I update all component textarea/input text values ...

The cause that doesn't update the changed values is that you passed the states as defaultValue, not value in textarea.

HTMLTextAreaElement - Web APIs | MDN

Fires when the value of an <input> , <select> , or <textarea> element has been changed. selectionchange event Experimental. Fires when the text ......

Textarea - Components - Paste: The Design System for ...

A textarea allows for any text to be entered and can't be restricted as other inputs can. Accessibility. Include a visible label on...

Understanding React's key prop

The key prop is a mechanism for controlling component instances.

Documentation

Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed....