From be6e7ed5279edf37c1015b69e1fe98eae5ef3cc9 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Fri, 11 Sep 2026 16:36:51 -0400
Subject: [PATCH 1/3] fix(FOUR-27647): prevent nested screen watchers from
 running in design mode

Skip loading watchers when FormNestedScreen is rendered inside
VueFormBuilder. Watchers with run_onload were executing during parent
screen design, showing synchronous watcher messages outside runtime.

Detect VueFormBuilder in the component parent chain and assign an empty
watchers array on screen load in that context. Preview and request
runtime behavior is unchanged.

https://processmaker.atlassian.net/browse/FOUR-27647
---
 src/components/renderer/form-nested-screen.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/renderer/form-nested-screen.vue b/src/components/renderer/form-nested-screen.vue
index 4c7ca872c..17aeceea2 100644
--- a/src/components/renderer/form-nested-screen.vue
+++ b/src/components/renderer/form-nested-screen.vue
@@ -72,6 +72,16 @@ export default {
     },
   },
   methods: {
+    isInScreenBuilder() {
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options._componentTag === 'VueFormBuilder') {
+          return true;
+        }
+        parent = parent.$parent;
+      }
+      return false;
+    },
     isSubmitButton(item) {
       return item.config && item.component === 'FormButton' && item.config.event === 'submit';
     },
@@ -130,7 +140,7 @@ export default {
             this.hideSubmitButtons(this.config);
             this.computed = response.data.computed;
             this.customCSS = response.data.custom_css;
-            this.watchers = response.data.watchers;
+            this.watchers = this.isInScreenBuilder() ? [] : (response.data.watchers || []);
             this.screenTitle = response.data.title;
 
             if (this.$attrs['disabled']) {

From 1a7b153d97fe88d12633fbe583307e0ae1e261c5 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Tue, 22 Sep 2026 01:12:29 -0400
Subject: [PATCH 2/3] fix(FOUR-27647): prevent nested screen watchers from
 running in design mode

Correct VueFormBuilder detection in FormNestedScreen.isInScreenBuilder().
The previous check only matched _componentTag === 'VueFormBuilder', but PM4
renders the builder as <vue-form-builder>, so watchers were still loaded
and run_onload scripts executed during parent screen design.

- Match vue-form-builder, VueFormBuilder tag, and VueFormBuilder name in
  the parent chain
- Set name: 'VueFormBuilder' on vue-form-builder for reliable detection
- Add unit tests for design, preview, deep nesting, and loadScreen behavior

https://processmaker.atlassian.net/browse/FOUR-27647
---
 .../renderer/form-nested-screen.vue           |   3 +-
 src/components/vue-form-builder.vue           |   1 +
 tests/unit/FormNestedScreen.spec.js           | 173 ++++++++++++++++++
 3 files changed, 176 insertions(+), 1 deletion(-)
 create mode 100644 tests/unit/FormNestedScreen.spec.js

diff --git a/src/components/renderer/form-nested-screen.vue b/src/components/renderer/form-nested-screen.vue
index 17aeceea2..aed6e4735 100644
--- a/src/components/renderer/form-nested-screen.vue
+++ b/src/components/renderer/form-nested-screen.vue
@@ -75,7 +75,8 @@ export default {
     isInScreenBuilder() {
       let parent = this.$parent;
       while (parent) {
-        if (parent.$options._componentTag === 'VueFormBuilder') {
+        const { _componentTag: tag, name } = parent.$options;
+        if (tag === 'vue-form-builder' || tag === 'VueFormBuilder' || name === 'VueFormBuilder') {
           return true;
         }
         parent = parent.$parent;
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 1f616fb13..b959d8cae 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -615,6 +615,7 @@ const defaultGroupOrder = {
 const DEFAULT_GROUP = "Advanced";
 
 export default {
+  name: 'VueFormBuilder',
   components: {
     TabsBar,
     draggable,
diff --git a/tests/unit/FormNestedScreen.spec.js b/tests/unit/FormNestedScreen.spec.js
new file mode 100644
index 000000000..cab3a9fbd
--- /dev/null
+++ b/tests/unit/FormNestedScreen.spec.js
@@ -0,0 +1,173 @@
+const fs = require('fs');
+const path = require('path');
+const vm = require('vm');
+
+const componentPath = path.join(
+  process.cwd(),
+  'src/components/renderer/form-nested-screen.vue',
+);
+
+const source = fs.readFileSync(componentPath, 'utf8');
+
+function getComponentOptions() {
+  const scriptMatch = source.match(/<script>([\s\S]*?)<\/script>/);
+
+  if (!scriptMatch) {
+    throw new Error('Unable to find form-nested-screen.vue script block');
+  }
+
+  const executableScript = scriptMatch[1]
+    .replace(/^import .*$/gm, '')
+    .replace('export default', 'module.exports =');
+
+  const sandbox = {
+    module: { exports: {} },
+    exports: {},
+    window: {},
+    global: {},
+    VueFormRenderer: {},
+    Promise,
+    setTimeout,
+    clearTimeout,
+    console,
+  };
+
+  vm.runInNewContext(executableScript, sandbox, { filename: componentPath });
+
+  return sandbox.module.exports;
+}
+
+const FormNestedScreen = getComponentOptions();
+
+const makeContext = (parents) => {
+  let parent = null;
+
+  [...parents].reverse().forEach((options) => {
+    parent = { $options: options, $parent: parent };
+  });
+
+  return { $parent: parent };
+};
+
+describe('FormNestedScreen design mode watchers', () => {
+  test('detects vue-form-builder tag in parent chain', () => {
+    const context = makeContext([
+      { _componentTag: 'div' },
+      { _componentTag: 'vue-form-builder' },
+    ]);
+
+    expect(FormNestedScreen.methods.isInScreenBuilder.call(context)).toBe(true);
+  });
+
+  test('detects VueFormBuilder tag in parent chain', () => {
+    const context = makeContext([
+      { _componentTag: 'VueFormBuilder' },
+    ]);
+
+    expect(FormNestedScreen.methods.isInScreenBuilder.call(context)).toBe(true);
+  });
+
+  test('detects VueFormBuilder name in parent chain', () => {
+    const context = makeContext([
+      { _componentTag: 'div', name: 'VueFormBuilder' },
+    ]);
+
+    expect(FormNestedScreen.methods.isInScreenBuilder.call(context)).toBe(true);
+  });
+
+  test('returns false outside screen builder', () => {
+    const context = makeContext([
+      { _componentTag: 'screen-renderer' },
+    ]);
+
+    expect(FormNestedScreen.methods.isInScreenBuilder.call(context)).toBe(false);
+  });
+
+  test('detects screen builder through deeply nested screens', () => {
+    const context = makeContext([
+      { _componentTag: 'vue-form-renderer' },
+      { _componentTag: 'FormNestedScreen' },
+      { _componentTag: 'vue-form-renderer' },
+      { _componentTag: 'FormNestedScreen' },
+      { _componentTag: 'vue-form-builder', name: 'VueFormBuilder' },
+    ]);
+
+    expect(FormNestedScreen.methods.isInScreenBuilder.call(context)).toBe(true);
+  });
+
+  test('does not treat preview renderer as screen builder', () => {
+    const context = makeContext([
+      { _componentTag: 'vue-form-renderer' },
+      { _componentTag: 'b-col' },
+      { _componentTag: 'b-row' },
+    ]);
+
+    expect(FormNestedScreen.methods.isInScreenBuilder.call(context)).toBe(false);
+  });
+
+  test('does not load watchers when rendered inside screen builder', async () => {
+    const watchers = [{ uid: 'watcher-1', run_onload: true }];
+    const context = Object.assign(
+      makeContext([{ _componentTag: 'vue-form-builder' }]),
+      FormNestedScreen.methods,
+      {
+        config: [],
+        computed: [],
+        customCSS: null,
+        watchers: [],
+        screenTitle: null,
+        ancestorScreens: [],
+        $attrs: {},
+        $root: { $emit: jest.fn() },
+        $dataProvider: {
+          getScreen: jest.fn().mockResolvedValue({
+            data: {
+              config: [{ name: 'Page 1', items: [] }],
+              computed: [],
+              custom_css: '',
+              watchers,
+              title: 'Nested Screen',
+            },
+          }),
+        },
+      },
+    );
+
+    await FormNestedScreen.methods.loadScreen.call(context, 1);
+
+    expect(context.watchers).toEqual([]);
+  });
+
+  test('loads watchers in preview/runtime context', async () => {
+    const watchers = [{ uid: 'watcher-1', run_onload: true }];
+    const context = Object.assign(
+      makeContext([{ _componentTag: 'screen-renderer' }]),
+      FormNestedScreen.methods,
+      {
+        config: [],
+        computed: [],
+        customCSS: null,
+        watchers: [],
+        screenTitle: null,
+        ancestorScreens: [],
+        $attrs: {},
+        $root: { $emit: jest.fn() },
+        $dataProvider: {
+          getScreen: jest.fn().mockResolvedValue({
+            data: {
+              config: [{ name: 'Page 1', items: [] }],
+              computed: [],
+              custom_css: '',
+              watchers,
+              title: 'Nested Screen',
+            },
+          }),
+        },
+      },
+    );
+
+    await FormNestedScreen.methods.loadScreen.call(context, 1);
+
+    expect(context.watchers).toEqual(watchers);
+  });
+});

From 42038a997523f98e24df3876a6d5b0e61cef8485 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Tue, 22 Sep 2026 12:44:12 -0400
Subject: [PATCH 3/3] fix(FOUR-27647): skip watchers when nested screen renders
 in design mode

Prevent nested screen watchers from running while editing a parent screen
in VueFormBuilder. Watchers with run_onload were executing during design
mode and showing synchronous watcher messages outside runtime.

Detect VueFormBuilder in the component parent chain and assign an empty
watchers array on screen load in that context. Preview and request runtime
behavior is unchanged.

https://processmaker.atlassian.net/browse/FOUR-27647
---
 src/components/renderer/form-nested-screen.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/renderer/form-nested-screen.vue b/src/components/renderer/form-nested-screen.vue
index aed6e4735..fbe92a2d6 100644
--- a/src/components/renderer/form-nested-screen.vue
+++ b/src/components/renderer/form-nested-screen.vue
@@ -141,7 +141,7 @@ export default {
             this.hideSubmitButtons(this.config);
             this.computed = response.data.computed;
             this.customCSS = response.data.custom_css;
-            this.watchers = this.isInScreenBuilder() ? [] : (response.data.watchers || []);
+            this.watchers = this.isInScreenBuilder() ? [] : response.data.watchers;
             this.screenTitle = response.data.title;
 
             if (this.$attrs['disabled']) {