fix: autogrow textarea bugs during animation (#24481)

web/src/lib/components/album-page/album-description.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { updateAlbumInfo } from '@immich/sdk';
+  import { shortcut } from '$lib/actions/shortcut';
   import { handleError } from '$lib/utils/handle-error';
-  import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
+  import { updateAlbumInfo } from '@immich/sdk';
+  import { Textarea } from '@immich/ui';
   import { t } from 'svelte-i18n';
+  import { fromAction } from 'svelte/attachments';
 
   interface Props {
     id: string;
@@ -12,27 +14,34 @@
 
   let { id, description = $bindable(), isOwned }: Props = $props();
 
-  const handleUpdateDescription = async (newDescription: string) => {
+  const handleFocusOut = async () => {
     try {
       await updateAlbumInfo({
         id,
         updateAlbumDto: {
-          description: newDescription,
+          description,
         },
       });
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_album'));
     }
-    description = newDescription;
   };
 </script>
 
 {#if isOwned}
-  <AutogrowTextarea
-    content={description}
-    class="w-full mt-2 text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
-    onContentUpdate={handleUpdateDescription}
+  <Textarea
+    bind:value={description}
+    class="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(),
+    }))}
   />
 {:else if description}
   <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">