Component suggestion: A growable textarea

[cassepipe]

It's quite nice to have a textbox that grows as more text is input but else won't take too much place.

The Discord message input is a good example.

Apparently it is quite hard to implement correctly so it would bring much value to the toolkit I believe.

I have tried my hand and succeeded implementing one based on a hack where a <pre> element is hideen behind a textarea and gets the same input and made it work but I already broke it as it is unclear how it works : https://alistapart.com/article/expanding-text-areas-made-elegant/

There seem to have competing solutions. Let's document them here !

[cassepipe]

That MDN example is quite bare bones and not up what I have in mind :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#autogrowing_textarea_example

Relevant Stack Overflow question : https://stackoverflow.com/questions/15844868/can-i-make-a-textarea-grow-with-text-to-a-max-height

[cassepipe]

This is more in line with what I have in mind : https://svelte.dev/repl/027a45e78c06426f97e1dac4337100f9?version=4.1.2

[endigo9740]

@cassepipe yeah this was an idea suggested when creating our Chat block section. Unfortunately I couldn't find a good solution that didn't involve heavy lifting. Skeleton takes the stance of only introducing input components when it's absolutely the last resort. The reason for this is every time you abstract an input into a component, you're sacrificing some level of control. Likewise, this typically also (unintentionally) limits the accessibility of the input, be that on mobile, or some other circumstance.

For now I've heard the request for something like this, we'll consider it, but likely your best bet for now is to roll your own solution. That last example linked seems fairly competent.

[cassepipe]

Interesting, thanks, I ignored the current stance on non obvious components

Let's hope that some kind of attribute gets added to textarea at some point then

[Grihovny]

I agree with you !