diff --git a/example/src/Onboarding.tsx b/example/src/Onboarding.tsx index f14cd3e9..45a0fca2 100644 --- a/example/src/Onboarding.tsx +++ b/example/src/Onboarding.tsx @@ -266,7 +266,7 @@ const OnboardingWithProps = ({ options={{ features: ['onboarding_reserves'], jsonSchemaVersion: { - employment_basic_information: 'latest', + employment_basic_information: 3, }, jsonSchemaVersionByCountry: { DEU: { diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx index c4f33f5f..9fe906e5 100644 --- a/src/components/form/fields/ForcedValueField.tsx +++ b/src/components/form/fields/ForcedValueField.tsx @@ -69,30 +69,24 @@ export function ForcedValueField({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const titleSanitized = statement?.title + ? sanitizeHtml(statement?.title) + : sanitizeHtml(label); return (
- {statement ? ( - <> - {/* if statement?.title is undefined which could be for example belgium contract details form, we need to use the label attribute */} -

- - - ) : ( - )} +

); } diff --git a/src/components/form/fields/tests/ForcedValueField.test.tsx b/src/components/form/fields/tests/ForcedValueField.test.tsx index 84b08605..d7d18a11 100644 --- a/src/components/form/fields/tests/ForcedValueField.test.tsx +++ b/src/components/form/fields/tests/ForcedValueField.test.tsx @@ -29,13 +29,13 @@ describe('ForcedValueField Component', () => { }); describe('when statement is not provided', () => { - it('renders only the description', () => { + it('renders only the label and description', () => { renderWithFormContext(defaultProps); expect( screen.getByText('This is a test description'), ).toBeInTheDocument(); - expect(screen.queryByText('Test Label')).not.toBeInTheDocument(); + expect(screen.getByText('Test Label')).toBeInTheDocument(); }); }); diff --git a/src/components/form/utils.ts b/src/components/form/utils.ts index 8f4e32ed..ba4309a6 100644 --- a/src/components/form/utils.ts +++ b/src/components/form/utils.ts @@ -806,9 +806,13 @@ export function getFieldsWithFlatFieldsets({ return accumulatedFieldsSorted; }, fields); - const filteredFields = sortedFields.filter( - (field) => !flatFieldsetsFieldNames.has(field.name!), - ); + const filteredFields = sortedFields.filter((field) => { + // Always keep the fieldset wrapper + if (field.type === 'fieldset-flat') { + return true; + } + return !flatFieldsetsFieldNames.has(field.name!); + }); return filteredFields; }