fix(issues): fix textarea always grows (#194)

check if the textarea overflows before resizing it

Co-authored-by: Maximilian Bienhüls <[email protected]>

Author: mbienhuels

src/ui/c-input-text/c-input-text.vue

@@ -116,14 +116,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(() => {