From 91d8aa5055ac9ec347eaf53b74fc13c0517f1253 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sun, 22 Mar 2026 22:27:41 +0100
Subject: [PATCH] fix: prevent false dirty indicator on read-only detail pages

Async component init (e.g. MultiSelect replacing <select> with hidden
inputs) mutated the DOM after the initial form state snapshot, causing
a phantom "unsaved fields" warning. Re-baseline the initial state on
structural DOM changes until the first user interaction.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/js/core/app-detail-page-factory.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/js/core/app-detail-page-factory.js b/web/js/core/app-detail-page-factory.js
index c9e6ea7..3b4f0b3 100644
--- a/web/js/core/app-detail-page-factory.js
+++ b/web/js/core/app-detail-page-factory.js
@@ -456,12 +456,25 @@ export function initStandardDetailPage(options = {}) {
   };
 
   let formObserver = null;
+  let formStabilized = false;
   if (unsavedIndicatorEnabled && typeof MutationObserver !== 'undefined') {
     // Observe dynamic form controls (for example MultiSelect hidden inputs).
-    formObserver = new MutationObserver(() => {
-      if (!actionPolicy.isSubmitting()) {
-        syncUnsavedIndicator();
+    // Until the first user interaction, structural DOM changes (childList) are
+    // assumed to come from async component init (e.g. MultiSelect replacing
+    // <select> elements) — re-baseline instead of flagging as dirty.
+    formObserver = new MutationObserver((mutations) => {
+      if (actionPolicy.isSubmitting()) {
+        return;
       }
+      if (!formStabilized) {
+        const hasStructuralChange = mutations.some((m) => m.type === 'childList');
+        if (hasStructuralChange) {
+          initialState = createFormStateMap(form);
+          syncUnsavedIndicator();
+          return;
+        }
+      }
+      syncUnsavedIndicator();
     });
     formObserver.observe(form, {
       subtree: true,
@@ -471,6 +484,10 @@ export function initStandardDetailPage(options = {}) {
     });
   }
 
+  const markStabilized = () => { formStabilized = true; };
+  form.addEventListener('input', markStabilized, { once: true });
+  form.addEventListener('change', markStabilized, { once: true });
+
   const onKeyDown = (event) => {
     if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
       return;