Closed pawelgrimm closed 1 year ago
Nice catch. This happens not only on a controlled component, but anytime that the text area has an initial value that does not fit in its initial size (which can happen if we pass defaultValue="very long text"
as well).
I got a potential fix in #772 that does not do anything on value changes, but only calling the code that enables autoExpand
once when the auto-expand effect runs for the first time. I'm not sure if I'm missing something, but I do not see the reason to make the effect re-run when the value changes. Let me know what you think.
🐛 Bug report
Current behavior
When you use
TextArea
in controlled-mode (i.e. passing in avalue
prop) and have turned onautoExpand
, thetextarea
will not be sized correctly on the initial render. However, it will resize once the user edits the value. This is especially noticeable if you setrows={1}
and have an initialvalue
that doesn't fit on one line.This happens because we only resize the text area when the
input
event is fired, not whenever thevalue
prop changes.Steps to reproduce the bug
Edit the
text-area.stories.tsx
story forAutoExpandStory
to this:Expected behavior
The
autoExpand
mechanism should kick in on the initial render.Possible solutions
Update the
useEffect
inTextArea
to apply thevalue
prop tocontainerElement.dataset.replicatedValue
. Note that this means we'd be settingcontainerElement.dataset.replicatedValue
twice on each edit:value
props is changed and causes a re-renderThere are a few ways to work around this, but I don't have the appetite to propose a complete solution at this time. Additionally, the type of the
value
prop is incorrect, as it flows down from theHTMLInputElement
, which accepts a more diverse set of values thanHTMLTextAreaElement
, which only acceptsstring
.Environment
@doist/reactist
version: 21.0.0