FOUR-32670: Preserve Select List state during responsive changes

src/ValidationsFactory.js

@@ -13,6 +13,7 @@ class Validations {
   firstPage = 0;
   data = {};
   insideLoop = false;
+  isMobile = false;
   constructor(element, options) {
     this.element = element;
     Object.assign(this, options);
@@ -35,11 +36,13 @@ class Validations {
    * Check if element/container is visible.
    */
   isVisible() {
-    // Disable validations if field is hidden
+    const deviceConfig = this.element.config?.deviceVisibility || {
+      showForDesktop: true,
+      showForMobile: true
+    };
     const visibleInDevice =
-      this.element.visibleInDevice === null || this.element.visibleInDevice === undefined
-        ? true
-        : this.element.visibleInDevice;
+      (this.isMobile && deviceConfig.showForMobile) ||
+      (!this.isMobile && deviceConfig.showForDesktop);
     if (!visibleInDevice) {
       return false;
     }
@@ -62,7 +65,7 @@ class Validations {
 class ArrayOfFieldsValidations extends Validations {
   async addValidations(validations) {
     for (const item of this.element) {
-      await ValidationsFactory(item, { screen: this.screen, data: this.data, parentVisibilityRule: this.parentVisibilityRule, insideLoop: this.insideLoop }).addValidations(validations);
+      await ValidationsFactory(item, { screen: this.screen, data: this.data, parentVisibilityRule: this.parentVisibilityRule, insideLoop: this.insideLoop, isMobile: this.isMobile }).addValidations(validations);
     }
   }
 }
@@ -75,7 +78,7 @@ class ScreenValidations extends Validations {
     // add validations for page 1
     if (this.element.config[this.firstPage]) {
       pagesValidated = [this.firstPage];
-      const screenValidations = ValidationsFactory(this.element.config[this.firstPage].items, { screen: this.element, data: this.data });
+      const screenValidations = ValidationsFactory(this.element.config[this.firstPage].items, { screen: this.element, data: this.data, isMobile: this.isMobile });
       await screenValidations.addValidations(validations);
       pagesValidated = [];
     }
@@ -96,7 +99,7 @@ class FormNestedScreenValidations extends Validations {
       const definition = nestedScreen.config;
       let parentVisibilityRule = this.parentVisibilityRule ? this.parentVisibilityRule : this.element.config.conditionalHide;
       if (definition && definition[0] && definition[0].items) {
-        await ValidationsFactory(definition[0].items, { screen: nestedScreen, data: this.data, parentVisibilityRule }).addValidations(validations);
+        await ValidationsFactory(definition[0].items, { screen: nestedScreen, data: this.data, parentVisibilityRule, isMobile: this.isMobile }).addValidations(validations);
       }
     }
   }
@@ -146,7 +149,7 @@ class FormLoopValidations extends Validations {
     loopField['$each'] = {};
     this.checkForSiblings(validations);
     const firstRow = (get(this.data, this.element.config.name) || [{}])[0];
-    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow }, parentVisibilityRule: this.element.config.conditionalHide, insideLoop: true }).addValidations(loopField['$each']);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow }, parentVisibilityRule: this.element.config.conditionalHide, insideLoop: true, isMobile: this.isMobile }).addValidations(loopField['$each']);
   }
   checkForSiblings(validations) {
     const siblings = [];
@@ -207,7 +210,7 @@ class FormMultiColumnValidations extends Validations {
     if (!this.isVisible()) {
       return;
     }
-    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data, parentVisibilityRule: this.element.config.conditionalHide }).addValidations(validations);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data, parentVisibilityRule: this.element.config.conditionalHide, isMobile: this.isMobile }).addValidations(validations);
   }
 }
 
@@ -229,7 +232,7 @@ class PageNavigateValidations extends Validations {
     if (pagesValidated.length > 0 && !pagesValidated.includes(screenPageId)) {
       if (this.screen.config[screenNumber] && this.screen.config[screenNumber].items) {
         pagesValidated.push(screenPageId);
-        await ValidationsFactory(this.screen.config[this.element.config.eventData].items, { screen: this.screen, data: this.data }).addValidations(validations);
+        await ValidationsFactory(this.screen.config[this.element.config.eventData].items, { screen: this.screen, data: this.data, isMobile: this.isMobile }).addValidations(validations);
       }
     }
   }
@@ -308,7 +311,7 @@ class FormElementValidations extends Validations {
           // Check Device Visibility
           let visibleInDevice = true;
           try {
-            const isMobileScreen = this.$root.$children[0].$refs.renderer.definition.isMobile;
+            const isMobileScreen = this.isMobile;
             visibleInDevice =
               (isMobileScreen && deviceConfig.showForMobile) ||
               (!isMobileScreen && deviceConfig.showForDesktop);
@@ -375,7 +378,7 @@ class FormElementValidations extends Validations {
       };
     }
     if (this.element.items) {
-      ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
+      ValidationsFactory(this.element.items, { screen: this.screen, data: this.data, isMobile: this.isMobile }).addValidations(validations);
     }
   }
   camelCase(name) {

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

@@ -9,6 +9,7 @@
     :computed="computed"
     :custom-css="customCss"
     :watchers="watchers"
+    :is-mobile="isMobile"
     :_parent="_parent"
   />
 </template>
@@ -43,7 +44,8 @@ export default {
     collectionmode: {
       type: Object
     },
-    taskdraft: Object
+    taskdraft: Object,
+    isMobile: {type: Boolean, default: false}
   },
   data() {
     return {

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

@@ -9,6 +9,7 @@
     :computed="computed"
     :custom-css="customCss"
     :watchers="watchers"
+    :is-mobile="isMobile"
     :_parent="_parent"
   />
 </template>
@@ -38,6 +39,7 @@ export default {
       type: Object
     },
     taskdraft: Object,
+    isMobile: {type: Boolean, default: false},
   },
   data() {
     return {

src/components/renderer/form-loop.vue

@@ -7,6 +7,7 @@
         :computed="null"
         :custom-css="null"
         :watchers="null"
+        :is-mobile="isMobile"
         :is-loop="true"
         :debug-context="'Loop #' + loopIndex"
         :mode="mode"
@@ -54,7 +55,9 @@ export default {
     VueFormRenderer
   },
   mixins: [],
-  props: ["value", "config", "transientData", "name", "mode", "formConfig"],
+  // Renderer props stay untyped because legacy screens may pass non-canonical runtime types.
+  // eslint-disable-next-line prettier/prettier
+  props: ["value", "config", "transientData", "name", "mode", "formConfig", "isMobile"], // NOSONAR
   data() {
     return {
       matrix: [],

src/components/renderer/form-nested-screen.vue

@@ -11,6 +11,7 @@
     :computed="computed"
     :custom-css="customCSS"
     :watchers="watchers"
+    :is-mobile="isMobile"
     debug-context="Nested Screen"
     @css-errors="cssErrors = $event"
     :_parent="_parent"
@@ -42,6 +43,7 @@ export default {
     validationData: null,
     _parent: null,
     ancestorScreens: {type: Array, default: () => []},
+    isMobile: {type: Boolean, default: false},
   },
   data() {
     return {

src/components/renderer/form-record-list.vue

@@ -182,6 +182,7 @@
         :current-page="form"
         :computed="formComputed"
         :watchers="formWatchers"
+        :is-mobile="isMobile"
         debug-context="Record List Add"
         :_parent="validationData"
         @update="updateRowDataNamePrefix"
@@ -210,6 +211,7 @@
         :current-page="form"
         :computed="formComputed"
         :watchers="formWatchers"
+        :is-mobile="isMobile"
         debug-context="Record List Edit"
         :_parent="validationData"
         @update="updateRowDataNamePrefix"
@@ -293,7 +295,8 @@ export default {
     "source",
     "paginationOption",
     "designerMode",
-    "bgcolormodern"
+    "bgcolormodern",
+    "isMobile"
   ],
   data() {
     return {

src/components/screen-renderer.vue

@@ -39,6 +39,7 @@
       :vdata="value"
       :_parent="_parent || value?._parent"
       :_initial-page="currentPage"
+      :is-mobile="isMobile"
       :taskdraft="taskdraft"
       @after-submit="afterSubmit"
       @submit="submit"
@@ -71,6 +72,10 @@ export default {
       type: String,
       default: ""
     },
+    isMobile: {
+      type: Boolean,
+      default: false
+    },
     taskdraft: Object
   },
   data() {

src/components/vue-form-renderer.vue

@@ -12,6 +12,7 @@
       :value="data"
       :_parent="_parent || data?._parent"
       :definition="definition"
+      :is-mobile="responsiveIsMobile"
       :current-page="currentPage"
       data-cy="screen-renderer"
       :show-errors="showErrors"
@@ -72,8 +73,7 @@ export default {
         config: this.config,
         computed: this.computed,
         customCss: this.customCss,
-        watchers: this.watchers,
-        isMobile: false
+        watchers: this.watchers
       },
       formSubmitErrorClass: "",
       // watcher URLs
@@ -114,7 +114,8 @@ export default {
         }
       },
       scrollable: null,
-      containerObserver: null
+      containerObserver: null,
+      containerObserverFrame: null
     };
   },
   computed: {
@@ -188,6 +189,12 @@ export default {
     // Initialize the clipboard module
     this.$store.dispatch('clipboardModule/initializeClipboard');
   },
+  beforeDestroy() {
+    this.containerObserver.disconnect();
+    if (this.containerObserverFrame) {
+      cancelAnimationFrame(this.containerObserverFrame);
+    }
+  },
   methods: {
     ...mapActions("globalErrorsModule", [
       "validate",
@@ -367,10 +374,15 @@ export default {
       this.$emit("update-page-task");
       this.$refs.renderer.setCurrentPage(page);
     },
-    onContainerObserver(entries) {
-      // Control coordinates
-      const controlEl = entries[0].target.getBoundingClientRect();
-      this.parseCss();
+    onContainerObserver() {
+      if (this.containerObserverFrame) {
+        cancelAnimationFrame(this.containerObserverFrame);
+      }
+      this.containerObserverFrame = requestAnimationFrame(() => {
+        this.containerObserverFrame = null;
+        this.checkIfIsMobile();
+        this.parseCss();
+      });
     },
     saveClipboarToLocalStorage(items){
       localStorage.setItem("savedClipboard", JSON.stringify(items));

src/mixins/DeviceDetector.js

@@ -1,6 +1,22 @@
 export const MAX_MOBILE_WIDTH = 480;
 export const originalDevicePixelRatio = window.devicePixelRatio;
 export default {
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      detectedIsMobile: false
+    };
+  },
+  computed: {
+    responsiveIsMobile() {
+      return this.isMobile || this.detectedIsMobile;
+    }
+  },
   created() {
     window.addEventListener("resize", this.resizeHandler);
   },
@@ -17,10 +33,10 @@ export default {
       this.checkIfIsMobile();
     },
     checkIfIsMobile() {
-      const renderer = document.getElementById("vue-form-renderer");
+      const renderer = this.$refs.formRendererContainer;
       const isModelerInspector = this.data && this.data.$type && this.data.$type.startsWith("bpmn:");
-      if (this.definition && !isModelerInspector) {
-        this.definition.isMobile =
+      if (!isModelerInspector) {
+        this.detectedIsMobile =
           renderer &&
           renderer.offsetWidth <= MAX_MOBILE_WIDTH &&
           originalDevicePixelRatio === window.devicePixelRatio;

src/mixins/Json2Vue.js

@@ -448,6 +448,7 @@ export default {
         await ValidationsFactory(definition, {
           screen: definition,
           firstPage,
+          isMobile: this.isMobile,
           data: {
             _parent: this._parent,
             ...this.vdata

src/mixins/VisibilityRule.js

@@ -2,10 +2,10 @@ import { Parser } from 'expr-eval';
 
 export default {
   methods: {
-    visibilityRuleIsVisible(rule, name, deviceVisibility) {
-      const visibility = deviceVisibility || { showForDesktop: true, showForMobile: true, isMobile: false };
+    visibilityRuleIsVisible(rule, name, deviceVisibility, isMobile = false) {
+      const visibility = deviceVisibility || { showForDesktop: true, showForMobile: true };
       const visibleInDevice =
-        (visibility.isMobile && visibility.showForMobile) || (!visibility.isMobile && visibility.showForDesktop);
+        (isMobile && visibility.showForMobile) || (!isMobile && visibility.showForDesktop);
 
       try {
         if (rule && rule.trim().length > 0) {

src/mixins/extensions/FormDynamicPanel.js

@@ -20,8 +20,7 @@ export default {
             items: element.items,
           }
         ],
-        watchers: [], 
-        isMobile: false
+        watchers: []
       };
     },
 
@@ -57,6 +56,7 @@ export default {
       return this.createComponent("ScreenRenderer", {
         ":definition": this.byRef(nested),
         ":value": valueExpression,
+        ":is-mobile": "isMobile",
         ":loop-context": loopContextExpression,
         ":_parent": "getValidationData()",
         ":components": this.byRef(this.components),

src/mixins/extensions/LoadFieldComponents.js

@@ -1,11 +1,24 @@
 /* eslint-disable no-param-reassign */
+const RESPONSIVE_COMPONENTS = new Set([
+  "FormLoop",
+  "FormRecordList",
+  "FormNestedScreen",
+  "FormCollectionRecordControl",
+  "FormCollectionViewControl"
+]);
+
 export default {
   data() {
     return {
       popups: []
     };
   },
   methods: {
+    addResponsiveProperties(properties, componentName) {
+      if (RESPONSIVE_COMPONENTS.has(componentName)) {
+        properties[":is-mobile"] = "isMobile";
+      }
+    },
     searchForRecordList(items) {
       items.forEach((item) => {
         if (item instanceof Array) {
@@ -86,6 +99,7 @@ export default {
       if (componentName === "FormNestedScreen") {
         properties[":_parent"] = "_parent";
       }
+      this.addResponsiveProperties(properties, componentName);
       // Add cypress testing tags
       if (element.config.name) {
         properties["data-cy"] = `screen-field-${element.config.name}`;