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;