Allow text area to fill with default min height

1 files changed, 12 insertions, 3 deletions

diff --git a/app/src/web/ts/auto_resize_textarea.ts b/app/src/web/ts/auto_resize_textarea.ts
index f690d4c0..e170d14e 100644
--- a/app/src/web/ts/auto_resize_textarea.ts
+++ b/app/src/web/ts/auto_resize_textarea.ts
@@ -1,15 +1,24 @@
 // Credits to https://codepen.io/tomhodgins/pen/KgazaE
 (function () {
-    const textareas = <NodeListOf<HTMLTextAreaElement>>document.querySelectorAll('textarea.frostAutoExpand');
+    const textareas = <NodeListOf<HTMLTextAreaElement>>document.querySelectorAll('textarea:not(.frostAutoExpand)');
+
+    const dataAttribute = 'data-frost-minHeight';
 
     const _frostAutoExpand = (el: HTMLElement) => {
-        el.style.height = 'inherit'
-        el.style.height = `${el.scrollHeight}px`
+        if (!el.hasAttribute(dataAttribute)) {
+            el.setAttribute(dataAttribute, el.offsetHeight.toString());
+        }
+        // If no height is defined, have min bound to current height;
+        // otherwise we will allow for height decreases in case user deletes text
+        const minHeight = parseInt(el.getAttribute(dataAttribute) ?? '0');
+        el.style.height = 'inherit';
+        el.style.height = `${Math.max(el.scrollHeight, minHeight)}px`;
     };
     function _frostExpandAll() {
         textareas.forEach(_frostAutoExpand);
     }
     textareas.forEach(el => {
+        el.classList.add('frostAutoExpand')
         const __frostAutoExpand = () => {
             _frostAutoExpand(el)
         };