FOUR-32834: Preserve Collection Record Control mode

src/components/renderer/collection-record-mode.js

@@ -0,0 +1,6 @@
+export default function resolveCollectionMode(
+  collectionMode,
+  defaultMode = "Edit"
+) {
+  return collectionMode?.modeId ?? defaultMode;
+}

src/components/renderer/form-collection-record-control.vue

@@ -17,6 +17,7 @@
 import _ from "lodash";
 import VueFormRenderer from "../vue-form-renderer.vue";
 import CollectionRecordsList from "../inspector/collection-records-list.vue";
+import resolveCollectionMode from "./collection-record-mode";
 
 const globalObject = typeof window === "undefined" ? global : window;
 
@@ -120,7 +121,7 @@ export default {
         this.loadRecordCollection(
           this.collection.collectionId,
           record,
-          this.selDisplayMode
+          this.getCollectionMode()
         );
       } else {
         if (this.isMustache(record)) {
@@ -154,7 +155,7 @@ export default {
         this.hasMustache = true;
       }
 
-      const collectionMode = this.collectionmode?.modeId ?? this.defaultCollectionMode;
+      const collectionMode = this.getCollectionMode();
 
       this.loadRecordCollection(
         this.collection.collectionId,
@@ -164,6 +165,12 @@ export default {
     }
   },
   methods: {
+    getCollectionMode() {
+      return resolveCollectionMode(
+        this.collectionmode,
+        this.defaultCollectionMode
+      );
+    },
     isSubmitButton(item) {
       return (
         item.config &&

tests/unit/FormCollectionRecordControl.spec.js

@@ -0,0 +1,30 @@
+import resolveCollectionMode from "../../src/components/renderer/collection-record-mode";
+
+const readScreenId = 101;
+const updateScreenId = 202;
+
+function getScreenId(collectionMode) {
+  return resolveCollectionMode(collectionMode) === "View"
+    ? readScreenId
+    : updateScreenId;
+}
+
+describe("FormCollectionRecordControl mode resolution", () => {
+  test("preserves each configured mode when a shared dynamic record changes", () => {
+    const controls = [
+      { collectionMode: { modeId: "Edit" }, screenId: updateScreenId },
+      { collectionMode: { modeId: "View" }, screenId: readScreenId }
+    ];
+
+    [1, 2].forEach(() => {
+      controls.forEach(({ collectionMode, screenId }) => {
+        expect(getScreenId(collectionMode)).toBe(screenId);
+      });
+    });
+  });
+
+  test("defaults to Edit when collection mode is not configured", () => {
+    expect(resolveCollectionMode()).toBe("Edit");
+    expect(getScreenId()).toBe(updateScreenId);
+  });
+});