Sizing textarea

[KarinaSein]

Hello! I am working on a demo application to show how to use Conversations. I am using Textarea from Paste to take the message input from the user. This is what it looks right now:

According to the designs however, this Textarea should initially have the height of only one line instead of the current three. I have put this Textarea in a Box (also from Paste) with flex display and flex-basis of 36px (as it is supposed to expand if more lines are added) but that has not affected the height of the Textarea. Is there a good way to set the initial height for the Textarea?

[nkrantz]

Hi @KarinaSein,

Thanks for starting a discussion! There's currently no way to resize the initial height of Textarea. This is intentional, and we recommend using an Input if you're looking for a single-line field. Can you provide some more context around why you need the Textarea to have an initial height of 36px? That way, we'll be able to find a path forward, whether it's using a different component, or making a change to Textarea if absolutely necessary.

[kate-porter]

Hey @waijeeho! Thanks for this additional context - your messaging use case is definitely a more specialized one that, as you noted, Input and Textarea weren't designed for.

Being that this will be for a messaging interface, will you also need to support any media, rich text editing, etc.? If so, then you'll very likely want to roll something custom using Paste primitives rather than trying to get Input and Textarea to work for you, because those components won't be able to support things like media and rich text.

If you do decide to roll something custom, I'd recommend reaching out to the Flex team, as they have done a lot of work creating messaging interfaces for things like Email in Flex. Porlin and Duncan would be good folks to reach out to.

[waijeeho]

Makes sense, thank you @katieporter! 🙏

[kate-porter]

Sure thing! Definitely feel free to reach out while you are working through the custom composition for that, we're more than happy to help answer any questions that arise.

[dws75]

I noticed that the original spec for this component has a user resizable option which has not yet been implemented: https://docs.google.com/document/d/1Lsy6qq9r1S1qKkW7X1efZIw2digaMxZhQq3JPsuN6_w/edit#

When can we expect this work to be completed?

[kate-porter]

Hey @dschryerattwiliodotcom, thanks for the question! The user-resizable variant of Textarea was deprioritized because there hasn't been a strong need for it within our products thus far, though that doesn't mean it can't be reprioritized if a need arises. Can you share more about your use case?

[dws75]

Hello, Our customers have a number of fields where they input and update blobs of Json or other text objects that have very different sizes that may increase in size as they input them. These textarea inputs are typically placed above other small tables or information that the user should see when first entering the page, so increasing their height automatically is problematic. Our designer has given an OK to these pages and redesign to avoid this problem is not being considered by product at the moment. Another side note: Our customers have explicitly asked for these to be resizable. Does this make the problem clear? With kind regards, David

On Tue, 3. May 2022 at 22:55, Katie Porter ***@***.***> wrote: Hey @dschryerattwiliodotcom <https://urldefense.com/v3/__https://github.com/dschryerattwiliodotcom__;!!NCc8flgU!ZisC_pac8iB0lB_uV9sG9xn_oWL70g1wuRNk1yPvwxwJQVKmjDhFXJPybd6L5Jk_dPcqW3ZJrCi2Yc1rctEQa7N2$>, thanks for the question! The resizable variant of Textarea was deprioritized because there hasn't been a strong need for it within our products thus far, though that doesn't mean it can't be reprioritized if a need arises. Can you share more about your use case? — Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/1778*discussioncomment-2682711__;Iw!!NCc8flgU!ZisC_pac8iB0lB_uV9sG9xn_oWL70g1wuRNk1yPvwxwJQVKmjDhFXJPybd6L5Jk_dPcqW3ZJrCi2Yc1rcpGH9no0$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AYP42V3Z7POCMIV6HLJHQDDVIGACFANCNFSM5CHIFMVQ__;!!NCc8flgU!ZisC_pac8iB0lB_uV9sG9xn_oWL70g1wuRNk1yPvwxwJQVKmjDhFXJPybd6L5Jk_dPcqW3ZJrCi2Yc1rcrtJgE-5$> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- David Schryer Flex Admin Team [image: %(logoAlt)s] <https://www.twilio.com/?utm_source=email_signature> MOBILE +3725176922 EMAIL ***@***.*** LINKEDIN https://www.linkedin.com/in/schryer/ <https://linkedin.com/in/https://www.linkedin.com/in/schryer/> [image: Introducing Twilio Flex. Learn more about our customizable contact center platform.] <https://youtu.be/JLBNZbDfh5Q> Introducing Twilio Flex. Learn more about our customizable contact centre platform. <https://www.twilio.com/flex?utm_campaign=employee_signature&utm_source=employee_signature&utm_medium=email>

[kate-porter]

Thanks @dschryerattwiliodotcom, that makes a lot of sense! If possible, would you be able to share designs / screenshots of the current page(s) in question?

[dws75]

Hello @katieporter,

Our team has multiple pages that use a similar pattern as in the attached image.
This page includes a small form above a small table and a text area for user settings that can become quite large in some cases. In this case it is resizable so that our customers can change the input to match the task being accomplished at that time. This could include resizing to see or input large blobs of configuration.

[kate-porter]

Thanks for sharing this!

We've created a ticket to add user-resizable height to Textarea and have it slotted in the sprint after next, which starts on June 1 and ends on June 15. We've also created a ticket to add this variant to Figma which will be a quick follow after it's added to the coded Paste component. We'll circle back with you here once it's published.

Let us know if you have any other questions on this—thank you!

[dws75]

Awesome! Thanks!

[shleewhite]

Hi @dschryerattwiliodotcom

We have just shipped @twilio-paste/core@14.0.0 which includes the ability to vertically resize Textareas. There is an example of it on our docs site: https://paste.twilio.design/components/textarea#resizeable-textarea.

Please let me know if you have any other questions!