From 54a128744181de24cbffdaf24a24667143e09ad3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Bienh=C3=BCls?=
 <maximilian.bienhuels@triluxds.com>
Date: Wed, 27 Aug 2025 11:50:36 +0200
Subject: [PATCH] fix(issues): fix textarea always grows check if the textarea
 overflows before resizing it

---
 src/ui/c-input-text/c-input-text.vue | 33 +++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index b5f423d2..eec4e4fb 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -91,14 +91,41 @@ watch(
   { immediate: true },
 );
 
+/**
+ * Checks if the given HTMLElement overflows
+ * copied from stackoverflow: https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows
+ * @param el The HTMLElement to check
+ */
+function checkOverflow(el: HTMLElement) {
+  const curOverflow = el.style.overflow;
+  if (!curOverflow || curOverflow === 'visible') {
+    el.style.overflow = 'hidden';
+  }
+
+  const isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
+
+  el.style.overflow = curOverflow;
+
+  return isOverflowing;
+}
+
 function resizeTextarea() {
-  if (!textareaRef.value || !inputWrapperRef.value) {
+  if (textareaRef.value === undefined) {
+    return; // cannot chnge textarea if element is not available
+  }
+
+  if (!multiline) {
+    return; // textarea wont be displayed if multiline === false
+  }
+
+  if (!checkOverflow(textareaRef.value)) {
     return;
   }
 
-  const scrollHeight = textareaRef.value.scrollHeight + 2;
+  const textAreaElement = textareaRef.value!;
 
-  inputWrapperRef.value.style.height = `${scrollHeight}px`;
+  const scrollHeight = textAreaElement.scrollHeight + 2;
+  textAreaElement.style.height = `${scrollHeight}px`;
 }
 
 const htmlInputType = computed(() => {