automatically resize textarea

Author: ScriptRaccoon

src/components/SuggestionForm.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resize_textarea } from '$lib/client/utils'
 	import { faCheckCircle, faWarning } from '@fortawesome/free-solid-svg-icons'
 	import { tick } from 'svelte'
 	import Fa from 'svelte-fa'
@@ -60,7 +61,8 @@
 
 		<div class="form-group">
 			<label for="body">Details</label>
-			<textarea id="body" bind:value={body} required></textarea>
+			<textarea id="body" {@attach resize_textarea} bind:value={body} required
+			></textarea>
 		</div>
 
 		<button class="button" disabled={sending}>

src/lib/client/utils.ts

@@ -26,3 +26,21 @@ export function string_to_color(str: string): string {
 	const h = hash % 360
 	return `hsl(${h}, 80%, 50%)`
 }
+
+export const resize_textarea: Attachment = (textarea) => {
+	if (!(textarea instanceof HTMLTextAreaElement)) return
+
+	textarea.style.height = `${textarea.scrollHeight}px`
+	textarea.style.overflowY = 'hidden'
+
+	const adjust = () => {
+		textarea.style.height = 'auto'
+		textarea.style.height = `${textarea.scrollHeight}px`
+	}
+
+	textarea.addEventListener('input', adjust)
+
+	return () => {
+		textarea.removeEventListener('input', adjust)
+	}
+}