From 0da74569f2d6ca0c3d9554fe7f6514ee5501a05f Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 16 Feb 2026 18:25:13 +0100
Subject: [PATCH] fix(web): clear unsaved asset description when changing asset
 (#26255)

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

* remove unneeded $derived
---
 .../detail-panel-description.spec.ts          | 65 +++++++++++++++++++
 .../detail-panel-description.svelte           |  4 +-
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 web/src/lib/components/asset-viewer/detail-panel-description.spec.ts

diff --git a/web/src/lib/components/asset-viewer/detail-panel-description.spec.ts b/web/src/lib/components/asset-viewer/detail-panel-description.spec.ts
new file mode 100644
index 0000000000..3175bd8194
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/web/src/lib/components/asset-viewer/detail-panel-description.svelte b/web/src/lib/components/asset-viewer/detail-panel-description.svelte
index bc3929f3dd..9aeb7855b6 100644
--- a/web/src/lib/components/asset-viewer/detail-panel-description.svelte
+++ b/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(currentDescription);
+  let description = $derived(asset.exifInfo?.description ?? '');
 
   const handleFocusOut = async () => {
+    const currentDescription = asset.exifInfo?.description ?? '';
     if (description === currentDescription) {
       return;
     }