fix(web): update description height when navigating between assets (#14145)

web/src/lib/actions/autogrow.ts

@@ -1,7 +1,19 @@
-export const autoGrowHeight = (textarea?: HTMLTextAreaElement, height = 'auto') => {
+import { tick } from 'svelte';
-  if (!textarea) {
+import type { Action } from 'svelte/action';
-    return;
+
-  }
+type Parameters = {
-  textarea.style.height = height;
+  height?: string;
-  textarea.style.height = `${textarea.scrollHeight}px`;
+  value: string; // added to enable reactivity
+};
+
+export const autoGrowHeight: Action<HTMLTextAreaElement, Parameters> = (textarea, { height = 'auto' }) => {
+  const update = () => {
+    void tick().then(() => {
+      textarea.style.height = height;
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    });
+  };
+
+  update();
+  return { update };
 };

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

@@ -77,7 +77,6 @@
     onClose,
   }: Props = $props();
 
-  let textArea: HTMLTextAreaElement | undefined = $state();
   let innerHeight: number = $state(0);
   let activityHeight: number = $state(0);
   let chatHeight: number = $state(0);
@@ -142,10 +141,6 @@
       });
       reactions.push(data);
 
-      if (textArea) {
-        textArea.style.height = '18px';
-      }
-
       message = '';
       onAddComment();
       // Re-render the activity feed
@@ -306,11 +301,9 @@
           <div class="flex w-full items-center gap-4">
             <textarea
               {disabled}
-              bind:this={textArea}
               bind:value={message}
-              use:autoGrowHeight={'5px'}
+              use:autoGrowHeight={{ height: '5px', value: message }}
               placeholder={disabled ? $t('comments_are_disabled') : $t('say_something')}
-              oninput={() => autoGrowHeight(textArea, '5px')}
               use:shortcut={{
                 shortcut: { key: 'Enter' },
                 onShortcut: () => handleSendComment(),

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { autoGrowHeight } from '$lib/actions/autogrow';
   import { shortcut } from '$lib/actions/shortcut';
-  import { tick } from 'svelte';
 
   interface Props {
     content?: string;
@@ -12,13 +11,9 @@
 
   let { content = '', class: className = '', onContentUpdate = () => null, placeholder = '' }: Props = $props();
 
-  let textarea: HTMLTextAreaElement | undefined = $state();
   let newContent = $state(content);
-
   $effect(() => {
-    if (textarea && newContent.length > 0) {
+    newContent = content;
-      void tick().then(() => autoGrowHeight(textarea));
-    }
   });
 
   const updateContent = () => {
@@ -30,14 +25,14 @@
 </script>
 
 <textarea
-  bind:this={textarea}
+  bind:value={newContent}
   class="resize-none {className}"
   onfocusout={updateContent}
-  oninput={(e) => (newContent = e.currentTarget.value)}
   {placeholder}
   use:shortcut={{
     shortcut: { key: 'Enter', ctrl: true },
     onShortcut: (e) => e.currentTarget.blur(),
   }}
+  use:autoGrowHeight={{ value: newContent }}
   data-testid="autogrow-textarea">{content}</textarea
 >