fix(web): clear unsaved asset description when changing asset (#26255)

* fix(web): clear unsaved asset description when changing asset

* remove unneeded $derived

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

@@ -0,0 +1,65 @@
+import { assetFactory } from '@test-data/factories/asset-factory';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import DetailPanelDescription from './detail-panel-description.svelte';
+
+describe('DetailPanelDescription', () => {
+  it('clears unsaved draft on asset change', async () => {
+    const user = userEvent.setup();
+
+    const assetA = assetFactory.build({
+      id: 'asset-a',
+      exifInfo: { description: '' },
+    });
+    const assetB = assetFactory.build({
+      id: 'asset-b',
+      exifInfo: { description: '' },
+    });
+
+    const { rerender } = render(DetailPanelDescription, {
+      props: {
+        asset: assetA,
+        isOwner: true,
+      },
+    });
+
+    const textarea = screen.getByTestId('autogrow-textarea') as HTMLTextAreaElement;
+    await user.type(textarea, 'unsaved draft');
+    expect(textarea).toHaveValue('unsaved draft');
+
+    await rerender({
+      asset: assetB,
+      isOwner: true,
+    });
+
+    expect(screen.getByTestId('autogrow-textarea')).toHaveValue('');
+  });
+
+  it('updates description on asset switch', async () => {
+    const assetA = assetFactory.build({
+      id: 'asset-a',
+      exifInfo: { description: 'first description' },
+    });
+    const assetB = assetFactory.build({
+      id: 'asset-b',
+      exifInfo: { description: 'second description' },
+    });
+
+    const { rerender } = render(DetailPanelDescription, {
+      props: {
+        asset: assetA,
+        isOwner: true,
+      },
+    });
+
+    expect(screen.getByTestId('autogrow-textarea')).toHaveValue('first description');
+
+    await rerender({
+      asset: assetB,
+      isOwner: true,
+    });
+
+    expect(screen.getByTestId('autogrow-textarea')).toHaveValue('second description');
+  });
+});

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

@@ -13,10 +13,10 @@
 
   let { asset, isOwner }: Props = $props();
 
-  let currentDescription = $derived(asset.exifInfo?.description ?? '');
+  let description = $derived(asset.exifInfo?.description ?? '');
-  let description = $derived(currentDescription);
 
   const handleFocusOut = async () => {
+    const currentDescription = asset.exifInfo?.description ?? '';
     if (description === currentDescription) {
       return;
     }