Svelte action to auto-grow a textarea

Svelte action to auto-grow a textarea.md

Svelte action to auto-grow a textarea

A Svelte action that whena applied to a textaarea supports automatically growing or shrinking as content is added or removed.

Implementation

src/lib/actions/autogrow.ts:

export function autogrow(node: HTMLElement) {
	function adjustHeight() {
		node.style.height = "auto"; // Reset the height
		node.style.height = `${node.scrollHeight}px`; // Set height to fit content
	}

	// Attach the `input` event listener
	node.addEventListener("input", adjustHeight);

	// Adjust height on mount
	adjustHeight();

	return {
		destroy() {
			node.removeEventListener("input", adjustHeight);
		},
	};
}

Usage

<script lang="ts">
  import { autogrow } from "$lib/actions/autogrow";
</script>

<textarea use:autogrow />