feat: adds auto resize feature to textarea

[LimChorngUan]

This PR introduces an auto resize feature for the textarea field.
By default Payload textarea field will dynamically adjust its height based on its content.

[GermanJablo]

I hadn't checked the implementation yet, and I thought it was using the new CSS field-sizing property.

The implementation of this PR has some issues. For example, it doesn't display a scroll-bar. Also, it requires an additional div and some CSS tricks.

I think we should use field-sizing. It's a single line of code and is already supported by 73% of users. Firefox already gave a positive vote to the standard in September so it probably won't take that long. I didn't find anything specific about Safari.

[LimChorngUan]

@GermanJablo Hey thanks for the feedback! Yea I was using the extra div and css tricks because field-sizing isn't supported 100% yet but good to know it's gonna become a standard soon! I have changed it and so nice to see this PR just shrink to 1 line change :D

For the scrollbar, unless it hits the height constraint there will be no scrollbar displayed, it's the default field-sizing: content behaviour.
I also leave out setting the max-height here in Payload since I thought every customers will have different requirement and they can always set themselves by providing one through the custom classname. Is that okay?

[GermanJablo]

Yes, much better!

We also agree on not setting a pre-set max-height. In fact, we had the same discussion about the codeblock: #8209

The only detail I would fix in this PR is that if the user manually shrinks the textArea and it takes up less space than the content, the scrollbar should be visible (I don't see it right now).

[LimChorngUan]

The scrollbar is currently not visible on chrome also on the main branch, not sure why this style has been added? https://github.com/payloadcms/payload/blob/main/packages/ui/src/fields/Textarea/index.scss#L58-L60

I have removed for now and added overflow-y: scroll but could you confirm with your team if we should change that behaviour?

[LimChorngUan]

Screen.Recording.2025-01-28.at.21.18.08.mov

[GermanJablo]

• I changed overflow-y from scroll to auto, so that the scroll-bar is only visible if there is overflow.
• reverted PR feat: let textarea grow based on value #1398. Back then field-sizing wasn't a thing and fortunately certain hacks aren't needed now.

For the record, I made sure that textareas are displayed correctly in dark and light mode, as well as error states. Also, the height behavior now follows the decision made in #8209.

Thanks a lot, @LimChorngUan !

[LimChorngUan]

Thanks a lot of the feedback and changes you made too!

[github-actions]

🚀 This is included in version v3.21.0

[openbayou]

How do you get it to resize?

[LimChorngUan]

Hey @openbayou, it should be automatic and no configuration needed since we used field-sizing: content https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing. Note that firefox currently doesn't support it yet, but will become a standard eventually: mozilla/standards-positions#849