Merge 2a3c1c6e15 into baad38f0e6

web/src/lib/actions/autogrow.ts

@@ -1,4 +1,3 @@
-import { tick } from 'svelte';
 import type { Action } from 'svelte/action';
 
 type Parameters = {
@@ -6,14 +5,19 @@ type Parameters = {
   value: string; // added to enable reactivity
 };
 
-export const autoGrowHeight: Action<HTMLTextAreaElement, Parameters> = (textarea, { height = 'auto' }) => {
+export const autoGrowHeight: Action<HTMLTextAreaElement, Parameters> = (textarea) => {
-  const update = () => {
+  const resize = () => {
-    void tick().then(() => {
+    textarea.style.minHeight = '0';
-      textarea.style.height = height;
+    textarea.style.height = 'auto';
-      textarea.style.height = `${textarea.scrollHeight}px`;
+    textarea.style.height = `${textarea.scrollHeight}px`;
-    });
   };
 
-  update();
+  resize();
-  return { update };
+  textarea.addEventListener('input', resize);
+  return {
+    update: resize,
+    destroy() {
+      textarea.removeEventListener('input', resize);
+    },
+  };
 };

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -248,7 +248,8 @@
             <textarea
               {disabled}
               bind:value={message}
-              use:autoGrowHeight={{ height: '5px', value: message }}
+              rows="1"
+              use:autoGrowHeight={{ value: message }}
               placeholder={disabled ? $t('comments_are_disabled') : $t('say_something')}
               use:shortcut={{
                 shortcut: { key: 'Enter' },

web/src/lib/components/shared-components/autogrow-textarea.svelte

@@ -26,6 +26,7 @@
   class="resize-none {className}"
   onfocusout={updateContent}
   {placeholder}
+  rows="1"
   use:shortcut={{
     shortcut: { key: 'Enter', ctrl: true },
     onShortcut: (e) => e.currentTarget.blur(),