fix: fix text area auto-expand when controlled #912
Conversation
gnapse
requested review from
engfragui and
Copilot
and removed request for
a team
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the text area auto-expand functionality for controlled components by splitting the logic into two useEffect calls within a new useAutoExpand hook.
- Introduces a new useAutoExpand hook to handle controlled and uncontrolled auto-expand behavior.
- Removes the previous unified auto-expand useEffect in favor of the new split implementation.
Files not reviewed (1)
- src/text-area/text-area.stories.mdx: Language not supported
| {...props} | ||
| label="What do you want to accomplish?" | ||
| message="This one will not auto-expand." | ||
| autoExpand={false} |
There was a problem hiding this comment.
💭 Was it intentional to remove the "What do you want to accomplish?" textarea that had autoExpand={false}? I'm ok without it (as anyway there are plenty of other stories with textareas with autoExpand={false}, so not really needed.
There was a problem hiding this comment.
That was my thinking too.
| event.preventDefault() | ||
| setValue('') // Clear the input programmatically | ||
| } | ||
| }} |
There was a problem hiding this comment.
💭 I've noticed that this textarea extends further than before when I look at it in storybook (compared to prod). Not sure if it means anything interesting though 😅
| Before (prod) | After (this PR) |
|---|---|
|
|
|
There was a problem hiding this comment.
Mmm it seems to be because of the different max-width value compared to before (prod):
| Before (prod) | After (this PR) |
|---|---|
|
|
|
There was a problem hiding this comment.
❌ Oh I guess it's because we're not passing {...props} anymore to the textarea in this story. Assuming it wasn't intentional, I think we should put it back so that devs can play with the story in the Canvas like before, right? (Otherwise the controls would not work)
| Before (prod) | After (this PR) |
|---|---|
CleanShot.2025-04-30.at.11.34.50.mp4 |
CleanShot.2025-04-30.at.11.35.27.mp4 |
There was a problem hiding this comment.
My mistake! Must have removed the {...props} inadvertently. Will fix it.
| const isControlled = value !== undefined | ||
|
|
||
| React.useEffect( | ||
| function setupAutoExpandWhenUncontrolled() { |
There was a problem hiding this comment.
💭 I see that in setupAutoExpandWhenControlled you do !isControlled -> return.
Would it make sense to do isControl -> return in this case? 🤔
Short description
Fixes #911
The main issue is that our current auto-expand implementation is more suitable for when the component is uncontrolled. When the component is controlled, it is better to use the
valuechanges as the signal to run the effect.This PR now changes the auto-expand to set up two different
useEffectcalls:oninputevent to update the auto-expand size)valueas dependency in the effect, to update the auto-expand size)PR Checklist