Skip to content

Commit 3b142ff

Browse files
vaszigvaszig
committed
[open-formulieren/open-forms#5086] Fixed showing soft requirement warning in hidden components
1 parent 8548829 commit 3b142ff

File tree

3 files changed

+203
-3
lines changed

3 files changed

+203
-3
lines changed

‎src/formio/components/EditGrid.stories.jsx

+101-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
44
import {sleep} from 'utils';
55

66
import {mockBAGDataGet, mockBAGNoDataGet} from './AddressNL.mocks';
7-
import {SingleFormioComponent} from './story-util';
7+
import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
88

99
const defaultNested = [
1010
{
@@ -357,3 +357,103 @@ export const WithLayoutComponents = {
357357
});
358358
},
359359
};
360+
361+
export const WithSoftRequiredComponent = {
362+
name: 'With soft required component',
363+
render: MultipleFormioComponents,
364+
args: {
365+
components: [
366+
{
367+
type: 'editgrid',
368+
key: 'editgrid',
369+
label: "Auto's",
370+
groupLabel: 'Auto',
371+
hidden: false,
372+
components: [
373+
{
374+
type: 'file',
375+
key: 'file',
376+
label: 'Soft required upload',
377+
openForms: {softRequired: true},
378+
},
379+
],
380+
},
381+
382+
{
383+
type: 'softRequiredErrors',
384+
html: `
385+
<p>Not all required fields are filled out. That can get expensive!</p>
386+
387+
{{ missingFields }}
388+
389+
<p>Are you sure you want to continue?</p>
390+
`,
391+
},
392+
],
393+
},
394+
play: async ({canvasElement}) => {
395+
const canvas = within(canvasElement);
396+
397+
// needed for formio
398+
await sleep(100);
399+
400+
expect(await canvas.findByText("Auto's")).toBeVisible();
401+
402+
const addButton = await canvas.findByRole('button', {name: 'Add Another'});
403+
await userEvent.click(addButton);
404+
405+
const saveButton = await canvas.findByRole('button', {name: 'Save'});
406+
await userEvent.click(saveButton);
407+
408+
await canvas.findByText('Not all required fields are filled out. That can get expensive!');
409+
const list = await canvas.findByRole('list', {name: 'Empty fields'});
410+
const listItem = within(list).getByRole('listitem');
411+
expect(listItem.textContent).toEqual('Soft required upload');
412+
},
413+
};
414+
415+
export const WithSoftRequiredComponentHiddenEditGrid = {
416+
name: 'With soft required component hidden editgrid',
417+
render: MultipleFormioComponents,
418+
args: {
419+
components: [
420+
{
421+
type: 'editgrid',
422+
key: 'editgrid',
423+
label: "Auto's",
424+
groupLabel: 'Auto',
425+
hidden: true,
426+
components: [
427+
{
428+
type: 'file',
429+
key: 'file',
430+
label: 'Soft required upload',
431+
openForms: {softRequired: true},
432+
},
433+
],
434+
},
435+
436+
{
437+
type: 'softRequiredErrors',
438+
html: `
439+
<p>Not all required fields are filled out. That can get expensive!</p>
440+
441+
{{ missingFields }}
442+
443+
<p>Are you sure you want to continue?</p>
444+
`,
445+
},
446+
],
447+
},
448+
play: async ({canvasElement}) => {
449+
const canvas = within(canvasElement);
450+
451+
// needed for formio
452+
await sleep(100);
453+
454+
await expect(canvas.queryByText("Auto's")).not.toBeInTheDocument();
455+
await expect(
456+
canvas.queryByText('Not all required fields are filled out. That can get expensive!')
457+
).not.toBeInTheDocument();
458+
},
459+
};

‎src/formio/components/Fieldset.stories.js

+97-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import {expect, within} from '@storybook/test';
2+
13
import {withUtrechtDocument} from 'story-utils/decorators';
4+
import {sleep} from 'utils';
25

3-
import {SingleFormioComponent} from './story-util';
6+
import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
47

58
export default {
69
title: 'Form.io components / Vanilla / Fieldset',
@@ -67,3 +70,96 @@ export const Fieldset = {
6770
hideHeader: false,
6871
},
6972
};
73+
74+
export const WithSoftRequiredComponent = {
75+
name: 'With soft required component',
76+
render: MultipleFormioComponents,
77+
args: {
78+
components: [
79+
{
80+
type: 'fieldset',
81+
key: 'fieldset',
82+
label: "Auto's",
83+
groupLabel: 'Auto',
84+
components: [
85+
{
86+
type: 'file',
87+
key: 'file',
88+
label: 'Soft required upload',
89+
openForms: {softRequired: true},
90+
},
91+
],
92+
},
93+
94+
{
95+
type: 'softRequiredErrors',
96+
html: `
97+
<p>Not all required fields are filled out. That can get expensive!</p>
98+
99+
{{ missingFields }}
100+
101+
<p>Are you sure you want to continue?</p>
102+
`,
103+
},
104+
],
105+
},
106+
play: async ({canvasElement}) => {
107+
const canvas = within(canvasElement);
108+
109+
// needed for formio
110+
await sleep(100);
111+
112+
expect(await canvas.findByText("Auto's")).toBeVisible();
113+
114+
await canvas.findByText('Not all required fields are filled out. That can get expensive!');
115+
const list = await canvas.findByRole('list', {name: 'Empty fields'});
116+
const listItem = within(list).getByRole('listitem');
117+
expect(listItem.textContent).toEqual('Soft required upload');
118+
},
119+
};
120+
121+
export const WithSoftRequiredComponentHiddenParent = {
122+
name: 'With soft required component hidden parent',
123+
render: MultipleFormioComponents,
124+
args: {
125+
components: [
126+
{
127+
type: 'fieldset',
128+
key: 'fieldset',
129+
label: "Auto's",
130+
groupLabel: 'Auto',
131+
hidden: true,
132+
components: [
133+
{
134+
type: 'file',
135+
key: 'file',
136+
label: 'Soft required upload',
137+
openForms: {softRequired: true},
138+
},
139+
],
140+
},
141+
142+
{
143+
type: 'softRequiredErrors',
144+
html: `
145+
<p>Not all required fields are filled out. That can get expensive!</p>
146+
147+
{{ missingFields }}
148+
149+
<p>Are you sure you want to continue?</p>
150+
`,
151+
},
152+
],
153+
},
154+
play: async ({canvasElement}) => {
155+
const canvas = within(canvasElement);
156+
157+
// needed for formio
158+
await sleep(100);
159+
160+
await expect(canvas.queryByText("Auto's")).not.toBeInTheDocument();
161+
await expect(
162+
canvas.queryByText('Not all required fields are filled out. That can get expensive!')
163+
).not.toBeInTheDocument();
164+
},
165+
};

‎src/formio/components/SoftRequiredErrors.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ class SoftRequiredErrors extends FormioContentField {
3333
// check which components have an empty value
3434
for (const component of softRequiredComponents) {
3535
const isEmpty = component.isEmpty();
36-
if (isEmpty) missingFieldLabels.push(component.label);
36+
const isParentVisible = component.parent?.visible;
37+
const isComponentVisible = component.visible;
38+
39+
if (isEmpty && isParentVisible && isComponentVisible)
40+
missingFieldLabels.push(component.label);
3741
}
3842

3943
if (!missingFieldLabels.length) return '';

0 commit comments

Comments
 (0)