diff options
Diffstat (limited to 'app/src/web/ts')
-rw-r--r-- | app/src/web/ts/auto_resize_textarea.ts | 15 |
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) }; |