From 29ccec81c4b7c440f28e61075ededb91843039ac Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Thu, 27 Feb 2025 16:30:23 +0100
Subject: [PATCH] [open-formulieren/open-forms#5086] Fixed showing soft
 requirement warning in hidden components

Backport-of: #795
---
 src/formio/components/SoftRequiredErrors.js   |   6 +-
 .../components/SoftRequiredErrors.stories.js  | 189 ++++++++++++++++++
 2 files changed, 193 insertions(+), 2 deletions(-)

diff --git a/src/formio/components/SoftRequiredErrors.js b/src/formio/components/SoftRequiredErrors.js
index d6c40b860..c2bd2442b 100644
--- a/src/formio/components/SoftRequiredErrors.js
+++ b/src/formio/components/SoftRequiredErrors.js
@@ -30,10 +30,12 @@ class SoftRequiredErrors extends FormioContentField {
     });
 
     const missingFieldLabels = [];
-    // check which components have an empty value
+    // check which components are visible and have an empty value
     for (const component of softRequiredComponents) {
       const isEmpty = component.isEmpty();
-      if (isEmpty) missingFieldLabels.push(component.label);
+      const isComponentVisible = component.visible;
+
+      if (isEmpty && isComponentVisible) missingFieldLabels.push(component.label);
     }
 
     if (!missingFieldLabels.length) return '';
diff --git a/src/formio/components/SoftRequiredErrors.stories.js b/src/formio/components/SoftRequiredErrors.stories.js
index d5b3a8479..2d3914b4f 100644
--- a/src/formio/components/SoftRequiredErrors.stories.js
+++ b/src/formio/components/SoftRequiredErrors.stories.js
@@ -109,3 +109,192 @@ export const FillField = {
     });
   },
 };
+
+export const WithFieldSetAndNestedComponent = {
+  name: 'With fieldset and nested component',
+  args: {
+    components: [
+      {
+        type: 'fieldset',
+        key: 'fieldset',
+        label: "Auto's",
+        groupLabel: 'Auto',
+        components: [
+          {
+            type: 'file',
+            key: 'file',
+            label: 'Soft required upload',
+            openForms: {softRequired: true},
+          },
+        ],
+      },
+
+      {
+        type: 'softRequiredErrors',
+        html: `
+        <p>Not all required fields are filled out. That can get expensive!</p>
+
+        {{ missingFields }}
+
+        <p>Are you sure you want to continue?</p>
+          `,
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    // needed for formio
+    await sleep(100);
+
+    expect(await canvas.findByText("Auto's")).toBeVisible();
+
+    await canvas.findByText('Not all required fields are filled out. That can get expensive!');
+    const list = await canvas.findByRole('list', {name: 'Empty fields'});
+    const listItem = within(list).getByRole('listitem');
+    expect(listItem.textContent).toEqual('Soft required upload');
+  },
+};
+
+export const WithFieldSetAndHiddenParent = {
+  name: 'With fieldset and hidden parent',
+  args: {
+    components: [
+      {
+        type: 'fieldset',
+        key: 'fieldset',
+        label: "Auto's",
+        groupLabel: 'Auto',
+        hidden: true,
+        components: [
+          {
+            type: 'file',
+            key: 'file',
+            label: 'Soft required upload',
+            openForms: {softRequired: true},
+          },
+        ],
+      },
+
+      {
+        type: 'softRequiredErrors',
+        html: `
+        <p>Not all required fields are filled out. That can get expensive!</p>
+
+        {{ missingFields }}
+
+        <p>Are you sure you want to continue?</p>
+          `,
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    // needed for formio
+    await sleep(100);
+
+    await expect(canvas.queryByText("Auto's")).not.toBeInTheDocument();
+    await expect(
+      canvas.queryByText('Not all required fields are filled out. That can get expensive!')
+    ).not.toBeInTheDocument();
+  },
+};
+
+export const WithEditGridAndNestedComponent = {
+  name: 'With editgrid and nested component',
+  args: {
+    components: [
+      {
+        type: 'editgrid',
+        key: 'editgrid',
+        label: "Auto's",
+        groupLabel: 'Auto',
+        hidden: false,
+        components: [
+          {
+            type: 'file',
+            key: 'file',
+            label: 'Soft required upload',
+            openForms: {softRequired: true},
+          },
+        ],
+      },
+
+      {
+        type: 'softRequiredErrors',
+        html: `
+        <p>Not all required fields are filled out. That can get expensive!</p>
+
+        {{ missingFields }}
+
+        <p>Are you sure you want to continue?</p>
+          `,
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    // needed for formio
+    await sleep(100);
+
+    expect(await canvas.findByText("Auto's")).toBeVisible();
+
+    const addButton = await canvas.findByRole('button', {name: 'Add Another'});
+    await userEvent.click(addButton);
+
+    const saveButton = await canvas.findByRole('button', {name: 'Save'});
+    await userEvent.click(saveButton);
+
+    await canvas.findByText('Not all required fields are filled out. That can get expensive!');
+    const list = await canvas.findByRole('list', {name: 'Empty fields'});
+    const listItem = within(list).getByRole('listitem');
+    expect(listItem.textContent).toEqual('Soft required upload');
+  },
+};
+
+export const WithEditGridAndHiddenParent = {
+  name: 'With editgrid and hidden parent',
+  args: {
+    components: [
+      {
+        type: 'editgrid',
+        key: 'editgrid',
+        label: "Auto's",
+        groupLabel: 'Auto',
+        hidden: true,
+        components: [
+          {
+            type: 'file',
+            key: 'file',
+            label: 'Soft required upload',
+            openForms: {softRequired: true},
+          },
+        ],
+      },
+
+      {
+        type: 'softRequiredErrors',
+        html: `
+        <p>Not all required fields are filled out. That can get expensive!</p>
+
+        {{ missingFields }}
+
+        <p>Are you sure you want to continue?</p>
+          `,
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    // needed for formio
+    await sleep(100);
+
+    await expect(canvas.queryByText("Auto's")).not.toBeInTheDocument();
+    await expect(
+      canvas.queryByText('Not all required fields are filled out. That can get expensive!')
+    ).not.toBeInTheDocument();
+  },
+};