From c465a37597aa8e640a1c425438440f01118abe92 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 23 Nov 2024 23:10:12 -0800
Subject: [PATCH] fix: textarea auto height issue

---
 src/lib/components/common/Textarea.svelte | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/common/Textarea.svelte b/src/lib/components/common/Textarea.svelte
index 66270f1b3..fe3edfaf5 100644
--- a/src/lib/components/common/Textarea.svelte
+++ b/src/lib/components/common/Textarea.svelte
@@ -3,30 +3,27 @@
 
 	export let value = '';
 	export let placeholder = '';
-
 	export let rows = 1;
 	export let required = false;
-
 	export let className =
 		'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none h-full';
 
 	let textareaElement;
 
+	// Adjust height on mount and after setting the element.
 	onMount(async () => {
 		await tick();
-		if (textareaElement) {
-			await tick();
-			setTimeout(adjustHeight, 0);
-		}
+		adjustHeight();
 	});
 
-	$: if (value) {
-		setTimeout(adjustHeight, 0);
-	}
+	// This reactive statement runs whenever `value` changes
+	$: adjustHeight();
 
+	// Adjust height to match content
 	const adjustHeight = () => {
 		if (textareaElement) {
-			textareaElement.style.height = '';
+			// Reset height to calculate the correct scroll height
+			textareaElement.style.height = 'auto';
 			textareaElement.style.height = `${textareaElement.scrollHeight}px`;
 		}
 	};
@@ -37,7 +34,6 @@
 	bind:value
 	{placeholder}
 	on:input={adjustHeight}
-	on:focus={adjustHeight}
 	class={className}
 	{rows}
 	{required}