fix: autogrow textarea bugs during animation (#24481)

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { resolve } from '$app/paths';
-  import { autoGrowHeight } from '$lib/actions/autogrow';
   import { shortcut } from '$lib/actions/shortcut';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -12,10 +11,11 @@
   import { handleError } from '$lib/utils/handle-error';
   import { isTenMinutesApart } from '$lib/utils/timesince';
   import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
-  import { Icon, IconButton, LoadingSpinner, toastManager } from '@immich/ui';
+  import { Icon, IconButton, LoadingSpinner, Textarea, toastManager } from '@immich/ui';
   import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiSend, mdiThumbUp } from '@mdi/js';
   import * as luxon from 'luxon';
   import { t } from 'svelte-i18n';
+  import { fromAction } from 'svelte/attachments';
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
@@ -245,19 +245,20 @@
         </div>
         <form class="flex w-full max-h-56 gap-1" {onsubmit}>
           <div class="flex w-full items-center gap-4">
-            <textarea
+            <Textarea
               {disabled}
               bind:value={message}
-              use:autoGrowHeight={{ height: '5px', value: message }}
+              rows={1}
+              grow
               placeholder={disabled ? $t('comments_are_disabled') : $t('say_something')}
-              use:shortcut={{
+              {@attach fromAction(shortcut, () => ({
                 shortcut: { key: 'Enter' },
                 onShortcut: () => handleSendComment(),
-              }}
+              }))}
               class="h-4.5 {disabled
                 ? 'cursor-not-allowed'
-                : ''} w-full max-h-56 pe-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200"
-            ></textarea>
+                : ''} w-full max-h-56 pe-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200 dark:bg-gray-200"
+            ></Textarea>
           </div>
           {#if isSendingMessage}
             <div class="flex items-end place-items-center pb-2 ms-0">

web/src/lib/components/asset-viewer/detail-panel-description.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
+  import { shortcut } from '$lib/actions/shortcut';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
-  import { toastManager } from '@immich/ui';
+  import { Textarea, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
+  import { fromAction } from 'svelte/attachments';
 
   interface Props {
     asset: AssetResponseDto;
@@ -12,15 +13,17 @@
 
   let { asset, isOwner }: Props = $props();
 
-  let description = $derived(asset.exifInfo?.description || '');
+  let currentDescription = asset.exifInfo?.description ?? '';
+  let draftDescription = $state(currentDescription);
 
-  const handleFocusOut = async (newDescription: string) => {
+  const handleFocusOut = async () => {
+    if (draftDescription === currentDescription) {
+      return;
+    }
     try {
-      await updateAsset({ id: asset.id, updateAssetDto: { description: newDescription } });
-
-      asset.exifInfo = { ...asset.exifInfo, description: newDescription };
-
+      await updateAsset({ id: asset.id, updateAssetDto: { description: draftDescription } });
       toastManager.success($t('asset_description_updated'));
+      currentDescription = draftDescription;
     } catch (error) {
       handleError(error, $t('cannot_update_the_description'));
     }
@@ -29,15 +32,23 @@
 
 {#if isOwner}
   <section class="px-4 mt-10">
-    <AutogrowTextarea
-      content={description}
-      class="max-h-125 w-full border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
-      onContentUpdate={handleFocusOut}
+    <Textarea
+      bind:value={draftDescription}
+      class="max-h-40 outline-none border-b border-gray-500 bg-transparent ring-0 focus:ring-0 resize-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary dark:bg-transparent"
+      rows={1}
+      grow
+      shape="rectangle"
+      onfocusout={handleFocusOut}
       placeholder={$t('add_a_description')}
+      data-testid="autogrow-textarea"
+      {@attach fromAction(shortcut, () => ({
+        shortcut: { key: 'Enter', ctrl: true },
+        onShortcut: (e) => e.currentTarget.blur(),
+      }))}
     />
   </section>
-{:else if description}
+{:else if draftDescription}
   <section class="px-4 mt-6">
-    <p class="wrap-break-word whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
+    <p class="wrap-break-word whitespace-pre-line w-full text-black dark:text-white text-base">{draftDescription}</p>
   </section>
 {/if}