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

Open
eiresendez wants to merge 3 commits into
developfrom
task/FOUR-32670
Open

FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom
task/FOUR-32670

Conversation

@eiresendez

@eiresendezeiresendez commented Aug 20, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

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

ci:deploy

@cypress

cypressBot commented Aug 20, 2026•
edited
Loading

Copy link
Copy Markdown

screen-builderRun #2361

Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎

@eiresendezeiresendez self-assigned this Aug 20, 2026
@nolanpro

nolanpro commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

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

@CarliPinell

CarliPinell commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

The code looks good. No observations.

CarliPinell
CarliPinell approved these changes Aug 20, 2026
View reviewed changes

@CarliPinellCarliPinell left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.

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

Image

@nolanpro

nolanpro commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

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

@eiresendez

eiresendez commented Aug 26, 2026

Copy link
Copy Markdown
ContributorAuthor

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

@decisions-sonarqube

decisions-sonarqubeBot commented Aug 26, 2026

Copy link
Copy Markdown

Quality Gate passedQuality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
FOUR-32670: Preserve Select List state during responsive changes - #1929
Open
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Open
FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Conversation
@eiresendez
@eiresendezeiresendez
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
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
ci:deploy
@cypress
cypressBot
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

screen-builderRun #2361
Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎
@eiresendezeiresendez
self-assigned this
Aug 20, 2026
@nolanpro
nolanpro
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@CarliPinell
CarliPinell
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
The code looks good. No observations.
CarliPinell
CarliPinell
approved these changes
Aug 20, 2026
View reviewed changes
@CarliPinellCarliPinell
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.
The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.
Image
@nolanpro
nolanpro
commented
Aug 25, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@eiresendez
eiresendez
commented
Aug 26, 2026

Copy link


Copy Markdown

ContributorAuthor
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
@decisions-sonarqube
decisions-sonarqubeBot
commented
Aug 26, 2026

Copy link


Copy Markdown

Quality Gate passedQuality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
FOUR-32670: Preserve Select List state during responsive changes - #1929
Open
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Open
FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Conversation
@eiresendez
@eiresendezeiresendez
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
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
ci:deploy
@cypress
cypressBot
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

screen-builderRun #2361
Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎
@eiresendezeiresendez
self-assigned this
Aug 20, 2026
@nolanpro
nolanpro
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@CarliPinell
CarliPinell
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
The code looks good. No observations.
CarliPinell
CarliPinell
approved these changes
Aug 20, 2026
View reviewed changes
@CarliPinellCarliPinell
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.
The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.
Image
@nolanpro
nolanpro
commented
Aug 25, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@eiresendez
eiresendez
commented
Aug 26, 2026

Copy link


Copy Markdown

ContributorAuthor
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
@decisions-sonarqube
decisions-sonarqubeBot
commented
Aug 26, 2026

Copy link


Copy Markdown

Quality Gate passedQuality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
FOUR-32670: Preserve Select List state during responsive changes - #1929
Open
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Open
FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Conversation
@eiresendez
@eiresendezeiresendez
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
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
ci:deploy
@cypress
cypressBot
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

screen-builderRun #2361
Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎
@eiresendezeiresendez
self-assigned this
Aug 20, 2026
@nolanpro
nolanpro
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@CarliPinell
CarliPinell
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
The code looks good. No observations.
CarliPinell
CarliPinell
approved these changes
Aug 20, 2026
View reviewed changes
@CarliPinellCarliPinell
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.
The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.
Image
@nolanpro
nolanpro
commented
Aug 25, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@eiresendez
eiresendez
commented
Aug 26, 2026

Copy link


Copy Markdown

ContributorAuthor
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
@decisions-sonarqube
decisions-sonarqubeBot
commented
Aug 26, 2026

Copy link


Copy Markdown

Quality Gate passedQuality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
FOUR-32670: Preserve Select List state during responsive changes - #1929
Open
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Open
FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Conversation
@eiresendez
@eiresendezeiresendez
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
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
ci:deploy
@cypress
cypressBot
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

screen-builderRun #2361
Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎
@eiresendezeiresendez
self-assigned this
Aug 20, 2026
@nolanpro
nolanpro
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@CarliPinell
CarliPinell
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
The code looks good. No observations.
CarliPinell
CarliPinell
approved these changes
Aug 20, 2026
View reviewed changes
@CarliPinellCarliPinell
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.
The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.
Image
@nolanpro
nolanpro
commented
Aug 25, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@eiresendez
eiresendez
commented
Aug 26, 2026

Copy link


Copy Markdown

ContributorAuthor
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
@decisions-sonarqube
decisions-sonarqubeBot
commented
Aug 26, 2026

Copy link


Copy Markdown

Quality Gate passedQuality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
FOUR-32670: Preserve Select List state during responsive changes - #1929
Open
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Open
FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Conversation
@eiresendez
@eiresendezeiresendez
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
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
ci:deploy
@cypress
cypressBot
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

screen-builderRun #2361
Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎
@eiresendezeiresendez
self-assigned this
Aug 20, 2026
@nolanpro
nolanpro
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@CarliPinell
CarliPinell
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
The code looks good. No observations.
CarliPinell
CarliPinell
approved these changes
Aug 20, 2026
View reviewed changes
@CarliPinellCarliPinell
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.
The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.
Image
@nolanpro
nolanpro
commented
Aug 25, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@eiresendez
eiresendez
commented
Aug 26, 2026

Copy link


Copy Markdown

ContributorAuthor
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
@decisions-sonarqube
decisions-sonarqubeBot
commented
Aug 26, 2026

Copy link


Copy Markdown

Quality Gate passedQuality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
FOUR-32670: Preserve Select List state during responsive changes - #1929
Open
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Open
FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Conversation
@eiresendez
@eiresendezeiresendez
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
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
ci:deploy
@cypress
cypressBot
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

screen-builderRun #2361
Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎
@eiresendezeiresendez
self-assigned this
Aug 20, 2026
@nolanpro
nolanpro
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@CarliPinell
CarliPinell
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
The code looks good. No observations.
CarliPinell
CarliPinell
approved these changes
Aug 20, 2026
View reviewed changes
@CarliPinellCarliPinell
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.
The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.
Image
@nolanpro
nolanpro
commented
Aug 25, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@eiresendez
eiresendez
commented
Aug 26, 2026

Copy link


Copy Markdown

ContributorAuthor
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
@decisions-sonarqube
decisions-sonarqubeBot
commented
Aug 26, 2026

Copy link


Copy Markdown

Quality Gate passedQuality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
FOUR-32670: Preserve Select List state during responsive changes - #1929
Open
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Open
FOUR-32670: Preserve Select List state during responsive changes#1929
eiresendez wants to merge 3 commits into
developfrom 
task/FOUR-32670
Conversation
@eiresendez
@eiresendezeiresendez
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
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
ci:deploy
@cypress
cypressBot
commented
Aug 20, 2026•

edited

Loading

Copy link


Copy Markdown

screen-builderRun #2361
Run Properties:status check passed Passed #2361 • git commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
Projectscreen-builder
Branch Reviewtask/FOUR-32670
Run statusstatus check passed Passed #2361
Run duration41m 08s
Commitgit commit41e6e9a97b: FOUR-32670: Preserve Select List state during responsive changes
CommitterEleazar Resendez
View all properties for this run ↗︎
Test results
Tests that failedFailures0
Tests that were flakyFlaky0
Tests that did not run due to a developer annotating a test with .skipPending19
Tests that did not run due to a failure in a mocha hookSkipped0
Tests that passedPassing394
View all changes introduced in this branch ↗︎
@eiresendezeiresendez
self-assigned this
Aug 20, 2026
@nolanpro
nolanpro
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@CarliPinell
CarliPinell
commented
Aug 20, 2026

Copy link


Copy Markdown

Contributor
The code looks good. No observations.
CarliPinell
CarliPinell
approved these changes
Aug 20, 2026
View reviewed changes
@CarliPinellCarliPinell
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and approved.
The image below shows screen is less tahn 420 px width and select list keeps the value "Engineering" correctly.
Image
@nolanpro
nolanpro
commented
Aug 25, 2026

Copy link


Copy Markdown

Contributor
QA server K8S was successfully deployed https://ci-794a772021.engk8s.processmaker.net
@eiresendez
eiresendez
commented
Aug 26, 2026

Copy link


Copy Markdown

ContributorAuthor
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
@decisions-sonarqube
decisions-sonarqubeBot
commented
Aug 26, 2026

Copy link


Copy Markdown

Quality Gate passedQuality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
90.6% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@CarliPinellCarliPinellCarliPinell approved these changes

Assignees

@eiresendezeiresendez

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@eiresendez@nolanpro@CarliPinell