FOUR-32670: Preserve Select List state during responsive changes

[eiresendez]

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

[cypress]

screen-builder    Run #2356

Run Properties:   Failed #2356  •  41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes

Project	screen-builder
Branch Review	task/FOUR-32670
Run status	Failed #2356
Run duration	42m 13s
Commit	41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Committer	Eleazar Resendez
View all properties for this run ↗︎

---

Test results
Failures	2
Flaky	0
Pending	19
Skipped	0
Passing	392
View all changes introduced in this branch ↗︎

---

Tests for review

  ComputedFields.spec.js • 1 failed test • CI - Chrome

View Output

Test		Artifacts
Computed fields > Focuses the first field that has an error		Test Replay Screenshots

  DefaultValues.spec.js • 1 failed test • CI - Chrome

View Output

Test		Artifacts
Default values > Javascript default value		Test Replay Screenshots

[nolanpro]

QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net

[decisions-sonarqube]

Quality Gate failed

Failed conditions
9 New issues

See analysis details on SonarQube

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[CarliPinell]

The code looks good. No observations.

[CarliPinell]

Tested and approved.

The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.

[nolanpro]

QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net

[eiresendez]

I reran the failed checks, but these failures are unrelated to the changes in this PR. The same intermittent Cypress/Vite issue has occurred in other Screen Builder PRs, where the app sometimes does not render and tests time out waiting for common UI elements. This CI stability issue should be addressed in a separate ticket outside the scope of this PR, so please disregard these failed checks when merging the changes here.

@nolanpro @sanjacornelius