Auto-expanding option for Textarea

[Pascaltib]

It would be nice to make the textarea component have the option to auto expand when typing up to a specific max height limit.
This is a requirement that I come across a lot.

This article has a good example at the bottom on how to implement it now.
Article

It can also be solved with a on:input event listener.

[Evertt]

Yes! I also wanted this feature some time ago, and @huntabyte was actually open to receive a PR from me to add this feature. But unfortunately I wasn't able to solve it very elegantly so I didn't get it implemented in the end unfortunately.

But the solutions in that article are relatively elegant. At least 10x more elegant than anything I was ever able to come up with. Unfortunately I just tried to implement it with tailwind like so:

Click here to expand the code

<script lang="ts">
	import type { HTMLTextareaAttributes } from "svelte/elements";
	import { cn } from "$lib/utils";

	type $$Props = HTMLTextareaAttributes & {
		["auto_grow"]?: boolean
	};

	let className: $$Props["class"] = undefined;
	let autoGrow: $$Props["auto_grow"] = false;
	export let value: $$Props["value"] = undefined;
	export { className as class, autoGrow as auto_grow };

	const baseClasses = " min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background"
</script>

<div data-replicated-value="{value ?? ""} " class={autoGrow
	? `grid after:row-start-1 after:col-start-1 after:row-end-2 after:col-end-2 after:invisible after:whitespace-pre-wrap after:content-[attr(data-replicated-value)] ${baseClasses.split(" ").join(" after:")}`
	: "contents"
}>
	<textarea
		class={cn(
			"flex placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
			baseClasses,
			autoGrow ? "inline-block resize-none overflow-hidden row-start-1 col-start-1 row-end-2 col-end-2" : "",
			className
		)}
		bind:value
		on:blur
		on:change
		on:click
		on:focus
		on:keydown
		on:keypress
		on:keyup
		on:mouseover
		on:mouseenter
		on:mouseleave
		on:paste
		on:input
		{...$$restProps}
	/>
</div>

As you can see, I tried to use a constant called baseClasses, that would need to be repeated for the <textarea> and the ::after pseudo element of the wrapping div, to avoid that repetition. But unfortunately, that didn't work. At least, ${baseClasses.split(" ").join(" after:")} does not allow tailwind to recognize what's going on and generate the right css. Which means you'd need to repeat those classes twice anyway, which is a bit of a pity.

[Pascaltib]

Hmmm yea I just think a elegant solution is not really possible right now.

We would need to either use a replicated parent element or make the textarea into a different element (such as span or div with role="textbox" contenteditable .

For a general purpose components this is probably not a good solution. Maybe we can come back to it in a couple years when there is a native solution that works on all browsers 🥲