FOUR-32670: Preserve Select List state during responsive changes - #1929

Issue & Reproduction Steps

Expected behavior: A Data Connector-backed Select List keeps its selected label, loaded options, and scalar screen-data value when switching between desktop and mobile widths.

Actual behavior: Crossing the 480 px breakpoint updated the structural screen definition, rebuilt the generated screen, remounted the Select List, and repeated its ListAll request. The selected scalar value remained in screen data, but its label disappeared while options reloaded.

Reproduction:

1. Configure a Select List to load options from a Data Connector.
2. Select an option in desktop preview.
3. Switch to mobile preview at 480 px, then return to desktop preview.
4. Observe the selection and Data Connector requests.

Solution

• Keep responsive state reactive and independent from the structural screen definition so breakpoint changes do not rebuild the generated screen.
• Propagate the responsive state through Screen Renderer, loops, dynamic panels, nested screens, Record Lists, and collection controls.
• Update device visibility and validation rules from reactive state while preserving the existing structural rebuild behavior for configuration changes.
• Observe each renderer's own container and coalesce resize updates to prevent ResizeObserver loops.
• Add a deterministic Cypress regression with a delayed mocked Data Connector response that verifies selection state, options, component identity, visibility rules, responsive validation recalculation, and a single ListAll request.

How to Test

1. Configure a Data Connector-backed Select List and select an option.
2. Add an empty required field that is visible only on desktop.
3. Switch desktop -> mobile at 480 px -> desktop.
4. Confirm the selected label, available options, and scalar screen-data value remain unchanged.
5. Confirm the screen changes from invalid -> valid -> invalid as the required field becomes hidden and visible again.
6. Confirm desktop/mobile visibility rules toggle and the Data Connector does not execute again.

Validation completed:

• LoopSelectList.spec.js: 3 passing, including responsive invalid -> valid -> invalid coverage.
• DeviceVisivilityInspector.spec.js: 22 passing.
• VisibilityRule.spec.js: 3 passing.
• npm run build-bundle: passed.
• Screen Builder dist copied into ProcessMaker Core and npm run dev: passed.
• Manual screen 64 verification preserved the same Select List DOM node across desktop -> mobile -> desktop with zero additional ListAll requests.

Local toolchain notes:

• Jest completed 60 passing assertions, but 7 suites are blocked before execution by the repository's existing Vue/ES module transform configuration.
• npm run lint cannot start because vue-cli-service is not installed by the current package manifest; direct ESLint also reports existing repository-wide lint debt.

Related Tickets & Packages

• https://processmaker.atlassian.net/browse/FOUR-32670
• Screen Builder only; no vue-form-elements changes were required.

ci:deploy