[open-formulieren/open-forms#5086] Fixed showing soft requirement war…

…ning in hidden components
open-formulieren · Feb 28, 2025 · dd4e786 · dd4e786
1 parent f2afabf
commit dd4e786
Show file tree

Hide file tree

Showing 2 changed files with 193 additions and 2 deletions.
diff --git 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
@@ -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();
+  },
+};