Force values title

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: {

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 (
     <div>
-      {statement ? (
-        <>
-          {/* if statement?.title is undefined which could be for example belgium contract details form, we need to use the label attribute */}
-          <p
-            className={`text-sm RemoteFlows__ForcedValue__Title__${name}`}
-            dangerouslySetInnerHTML={{
-              __html: sanitizeHtml(statement?.title || label),
-            }}
-          />
-          <Description
-            name={name}
-            description={sanitizeHtml(statement?.description || description)}
-            helpCenter={helpCenter}
-          />
-        </>
-      ) : (
-        <Description
-          name={name}
-          description={descriptionSanitized}
-          helpCenter={helpCenter}
+      {titleSanitized && (
+        <p
+          className={`text-sm RemoteFlows__ForcedValue__Title__${name}`}
+          dangerouslySetInnerHTML={{
+            __html: titleSanitized,
+          }}
         />
       )}
+      <Description
+        name={name}
+        description={descriptionSanitized}
+        helpCenter={helpCenter}
+      />
     </div>
   );
 }

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();
     });
   });
 

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;
 }