@openmrs/esm-form-engine-lib 2.1.0-pre.1561 → 2.1.0-pre.1565

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "2.1.0-pre.1561",
+  "version": "2.1.0-pre.1565",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

package/src/adapters/obs-adapter.test.ts

@@ -1,6 +1,6 @@
 import { type FormContextProps } from '../provider/form-provider';
 import { type FormField } from '../types';
-import { findObsByFormField, hasPreviousObsValueChanged, ObsAdapter } from './obs-adapter';
+import { hasPreviousObsValueChanged, findObsByFormField, ObsAdapter } from './obs-adapter';
 
 const formContext = {
   methods: null,
@@ -944,280 +944,3 @@ describe('findObsByFormField', () => {
     expect(matchedObs[0]).toBe(obsList[3]);
   });
 });
-
-describe('ObsAdapter - handling nested obsGroups', () => {
-  const createNestedFields = (): FormField => ({
-    label: 'Parent obsGroup',
-    type: 'obsGroup',
-    required: false,
-    id: 'parentObsgroup',
-    questionOptions: {
-      rendering: 'group',
-      concept: '163770AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    },
-    questions: [
-      {
-        label: 'Health Center',
-        type: 'obs',
-        required: false,
-        id: 'healthCenter',
-        questionOptions: {
-          rendering: 'select',
-          concept: '1745AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-          answers: [
-            {
-              concept: '1560AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-              label: 'Family member',
-            },
-            {
-              concept: '1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-              label: 'Health clinic/post',
-            },
-            {
-              concept: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-              label: 'Other',
-            },
-          ],
-        },
-      },
-      {
-        label: 'Nested obsGroup',
-        type: 'obsGroup',
-        required: false,
-        id: 'nestedObsgroup',
-        questionOptions: {
-          rendering: 'group',
-          concept: '3f824eeb-8452-4df0-b346-6ed056cbc5b9',
-        },
-        questions: [
-          {
-            label: 'Comment',
-            type: 'obs',
-            required: false,
-            id: 'comment',
-            questionOptions: {
-              rendering: 'textarea',
-              concept: '161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-            },
-          },
-          {
-            label: 'Other Diagnoses',
-            type: 'obs',
-            required: false,
-            id: 'otherDiagnoses',
-            questionOptions: {
-              rendering: 'select',
-              concept: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-              answers: [
-                {
-                  concept: '159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-                  label: 'Diagnosis certainty',
-                },
-              ],
-            },
-          },
-        ],
-      },
-    ],
-  });
-
-  const createNestedObs = () => ({
-    uuid: 'encounter-uuid',
-    obs: [
-      {
-        uuid: 'parent-group-uuid',
-        concept: {
-          uuid: '163770AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-        },
-        groupMembers: [
-          {
-            uuid: 'health-center-uuid',
-            concept: {
-              uuid: '1745AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-            },
-            value: {
-              uuid: '1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-            },
-            formFieldPath: 'rfe-forms-healthCenter',
-          },
-          {
-            uuid: 'nested-group-uuid',
-            concept: {
-              uuid: '3f824eeb-8452-4df0-b346-6ed056cbc5b9',
-            },
-            groupMembers: [
-              {
-                uuid: 'comment-uuid',
-                concept: {
-                  uuid: '161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-                },
-                value: 'Test comment for nested group',
-                formFieldPath: 'rfe-forms-comment',
-              },
-              {
-                uuid: 'diagnosis-uuid',
-                concept: {
-                  uuid: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-                },
-                value: {
-                  uuid: '159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-                },
-                formFieldPath: 'rfe-forms-otherDiagnoses',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  });
-
-  beforeEach(() => {
-    formContext.domainObjectValue = createNestedObs();
-    ObsAdapter.tearDown();
-  });
-
-  it('should get initial values from nested obs groups', async () => {
-    const fields = createNestedFields();
-
-    const healthCenterField = fields.questions[0];
-    const healthCenterValue = await ObsAdapter.getInitialValue(
-      healthCenterField,
-      formContext.domainObjectValue,
-      formContext,
-    );
-    expect(healthCenterValue).toBe('1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
-
-    const commentField = fields.questions[1].questions[0];
-    const commentValue = await ObsAdapter.getInitialValue(commentField, formContext.domainObjectValue, formContext);
-    expect(commentValue).toBe('Test comment for nested group');
-
-    const diagnosisField = fields.questions[1].questions[1];
-    const diagnosisValue = await ObsAdapter.getInitialValue(diagnosisField, formContext.domainObjectValue, formContext);
-    expect(diagnosisValue).toBe('159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
-  });
-
-  it('should transform values in nested groups', () => {
-    const fields = createNestedFields();
-
-    const healthCenterField = fields.questions[0];
-    const healthCenterObs = ObsAdapter.transformFieldValue(
-      healthCenterField,
-      '1560AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-      formContext,
-    );
-    expect(healthCenterObs).toEqual({
-      concept: '1745AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-      formFieldNamespace: 'rfe-forms',
-      formFieldPath: 'rfe-forms-healthCenter',
-      value: '1560AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    });
-
-    const commentField = fields.questions[1].questions[0];
-    const commentObs = ObsAdapter.transformFieldValue(commentField, 'New test comment', formContext);
-    expect(commentObs).toEqual({
-      concept: '161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-      formFieldNamespace: 'rfe-forms',
-      formFieldPath: 'rfe-forms-comment',
-      value: 'New test comment',
-    });
-  });
-
-  it('should edit existing values in nested groups', () => {
-    formContext.sessionMode = 'edit';
-    const fields = createNestedFields();
-
-    const healthCenterField = fields.questions[0];
-    healthCenterField.meta = {
-      previousValue: {
-        uuid: 'health-center-uuid',
-        value: {
-          uuid: '1588AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-        },
-      },
-    };
-
-    const healthCenterObs = ObsAdapter.transformFieldValue(
-      healthCenterField,
-      '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-      formContext,
-    );
-
-    expect(healthCenterObs).toEqual({
-      uuid: 'health-center-uuid',
-      formFieldNamespace: 'rfe-forms',
-      formFieldPath: 'rfe-forms-healthCenter',
-      value: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    });
-
-    const commentField = fields.questions[1].questions[0];
-    commentField.meta = {
-      previousValue: {
-        uuid: 'comment-uuid',
-        value: 'Test comment for nested group',
-      },
-    };
-
-    const commentObs = ObsAdapter.transformFieldValue(commentField, 'Updated comment text', formContext);
-
-    expect(commentObs).toEqual({
-      uuid: 'comment-uuid',
-      formFieldNamespace: 'rfe-forms',
-      formFieldPath: 'rfe-forms-comment',
-      value: 'Updated comment text',
-    });
-  });
-
-  it('should void deleted values in nested groups', () => {
-    formContext.sessionMode = 'edit';
-    const fields = createNestedFields();
-
-    const commentField = fields.questions[1].questions[0];
-    commentField.meta = {
-      previousValue: {
-        uuid: 'comment-uuid',
-        value: 'Test comment for nested group',
-      },
-    };
-
-    ObsAdapter.transformFieldValue(commentField, '', formContext);
-    expect(commentField.meta.submission.voidedValue).toEqual({
-      uuid: 'comment-uuid',
-      voided: true,
-    });
-    expect(commentField.meta.submission.newValue).toBe(null);
-
-    const diagnosisField = fields.questions[1].questions[1];
-    diagnosisField.meta = {
-      previousValue: {
-        uuid: 'diagnosis-uuid',
-        value: {
-          uuid: '159394AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-        },
-      },
-    };
-
-    ObsAdapter.transformFieldValue(diagnosisField, null, formContext);
-    expect(diagnosisField.meta.submission.voidedValue).toEqual({
-      uuid: 'diagnosis-uuid',
-      voided: true,
-    });
-    expect(diagnosisField.meta.submission.newValue).toBe(null);
-  });
-
-  it('should handle empty nested groups', async () => {
-    const emptyEncounter = {
-      uuid: 'encounter-uuid',
-      obs: [],
-    };
-
-    const fields = createNestedFields();
-
-    const healthCenterField = fields.questions[0];
-    const healthCenterValue = await ObsAdapter.getInitialValue(healthCenterField, emptyEncounter, formContext);
-    expect(healthCenterValue).toBe('');
-
-    const commentField = fields.questions[1].questions[0];
-    const commentValue = await ObsAdapter.getInitialValue(commentField, emptyEncounter, formContext);
-    expect(commentValue).toBe('');
-  });
-});

package/src/adapters/obs-adapter.ts

@@ -1,23 +1,23 @@
 import dayjs from 'dayjs';
-import { codedTypes, ConceptTrue } from '../constants';
+import { ConceptTrue, codedTypes } from '../constants';
 import {
-  type Attachment,
-  type AttachmentResponse,
+  type OpenmrsObs,
   type FormField,
-  type FormFieldValueAdapter,
   type OpenmrsEncounter,
-  type OpenmrsObs,
+  type AttachmentResponse,
+  type Attachment,
   type ValueAndDisplay,
 } from '../types';
 import {
+  hasRendering,
+  gracefullySetSubmission,
   clearSubmission,
   flattenObsList,
-  formatDateAsDisplayString,
-  gracefullySetSubmission,
-  hasRendering,
   parseToLocalDateTime,
+  formatDateAsDisplayString,
 } from '../utils/common-utils';
 import { type FormContextProps } from '../provider/form-provider';
+import { type FormFieldValueAdapter } from '../types';
 import { isEmpty } from '../validators/form-validator';
 import { getAttachmentByUuid } from '../api';
 import { formatDate, restBaseUrl } from '@openmrs/esm-framework';
@@ -60,45 +60,40 @@ export const ObsAdapter: FormFieldValueAdapter = {
     if (isEmpty(value)) {
       return value;
     }
-
-    if (Array.isArray(value)) {
-      return value.map((val) => getDisplayValueForSingleObs(field, val)).join(', ');
+    if (value instanceof Date) {
+      return formatDateAsDisplayString(field, value);
     }
-
-    return getDisplayValueForSingleObs(field, value);
+    if (rendering == 'checkbox') {
+      return value.map(
+        (selected) => field.questionOptions.answers?.find((option) => option.concept == selected)?.label,
+      );
+    }
+    if (rendering === 'toggle') {
+      return value ? field.questionOptions.toggleOptions.labelTrue : field.questionOptions.toggleOptions.labelFalse;
+    }
+    if (codedTypes.includes(rendering)) {
+      return field.questionOptions.answers?.find((option) => option.concept == value)?.label;
+    }
+    return value;
   },
   transformFieldValue: (field: FormField, value: any, context: FormContextProps) => {
     // clear previous submission
     clearSubmission(field);
-
     if (!field.meta.previousValue && isEmpty(value)) {
       return null;
     }
-
-    // Handle `obsGroup` recursively
-    if (field.type === 'obsGroup' && Array.isArray(field.questions)) {
-      const groupObs = field.questions.map((nestedField) =>
-        ObsAdapter.transformFieldValue(nestedField, nestedField.value, context),
-      );
-      return gracefullySetSubmission(field, { groupMembers: groupObs }, undefined);
-    }
-
     if (hasRendering(field, 'checkbox')) {
       return handleMultiSelect(field, value);
     }
-
     if (!isEmpty(value) && hasPreviousObsValueChanged(field, value)) {
       return gracefullySetSubmission(field, editObs(field, value), undefined);
     }
-
     if (field.meta.previousValue && isEmpty(value)) {
       return gracefullySetSubmission(field, undefined, voidObs(field.meta.previousValue));
     }
-
     if (!isEmpty(value)) {
       return gracefullySetSubmission(field, constructObs(field, value), undefined);
     }
-
     return null;
   },
   tearDown: function (): void {
@@ -150,46 +145,22 @@ function extractFieldValue(field: FormField, obsList: OpenmrsObs[] = [], makeFie
   return '';
 }
 
-/**
- * Extracts field's display value
- */
-
-function getDisplayValueForSingleObs(field: FormField, value: any) {
-  const rendering = field.questionOptions.rendering;
-
-  if (value instanceof Date) {
-    return formatDateAsDisplayString(field, value);
-  }
-  if (rendering == 'checkbox') {
-    return value.map((selected) => field.questionOptions.answers?.find((option) => option.concept == selected)?.label);
-  }
-  if (rendering === 'toggle') {
-    return value ? field.questionOptions.toggleOptions.labelTrue : field.questionOptions.toggleOptions.labelFalse;
-  }
-  if (codedTypes.includes(rendering)) {
-    return field.questionOptions.answers?.find((option) => option.concept == value)?.label;
-  }
-  return value;
-}
-
 export function constructObs(field: FormField, value: any): Partial<OpenmrsObs> {
   if (isEmpty(value) && field.type !== 'obsGroup') {
     return null;
   }
-
-  const draftObs: Partial<OpenmrsObs> = {
+  const draftObs =
+    field.type === 'obsGroup'
+      ? { groupMembers: [] }
+      : {
+          value: field.questionOptions.rendering.startsWith('date') ? formatDateByPickerType(field, value) : value,
+        };
+  return {
+    ...draftObs,
     concept: field.questionOptions.concept,
     formFieldNamespace: 'rfe-forms',
     formFieldPath: `rfe-forms-${field.id}`,
   };
-
-  if (field.type === 'obsGroup') {
-    draftObs.groupMembers = value?.map((v: any) => constructObs(field, v)) || [];
-  } else {
-    draftObs.value = field.questionOptions.rendering.startsWith('date') ? formatDateByPickerType(field, value) : value;
-  }
-
-  return draftObs;
 }
 
 export function voidObs(obs: OpenmrsObs) {
@@ -251,11 +222,6 @@ function handleMultiSelect(field: FormField, values: Array<string> = []) {
   // 2. a mix of both (previous and current)
   // 3. we only have a current value
 
-  // For `obsGroup` types, handle nested groups
-  if (field.type === 'obsGroup' && Array.isArray(field.questions)) {
-    return field.questions.map((nestedField) => handleMultiSelect(nestedField, nestedField.value));
-  }
-
   if (field.meta.previousValue && isEmpty(values)) {
     // we assume the user cleared the existing value(s)
     // so we void all previous values
@@ -265,7 +231,6 @@ function handleMultiSelect(field: FormField, values: Array<string> = []) {
       field.meta.previousValue.map((previousValue) => voidObs(previousValue)),
     );
   }
-
   if (field.meta.previousValue && !isEmpty(values)) {
     const toBeVoided = field.meta.previousValue.filter((obs) => !values.includes(obs.value.uuid));
     const toBeCreated = values.filter((v) => !field.meta.previousValue.some((obs) => obs.value.uuid === v));
@@ -275,7 +240,6 @@ function handleMultiSelect(field: FormField, values: Array<string> = []) {
       toBeVoided.map((obs) => voidObs(obs)),
     );
   }
-
   return gracefullySetSubmission(
     field,
     values.map((value) => constructObs(field, value)),

package/src/components/group/obs-group.component.tsx

@@ -1,54 +1,29 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { type FormFieldInputProps } from '../../types';
 import styles from './obs-group.scss';
-import { FormFieldRenderer, isGroupField } from '../renderer/field/form-field-renderer.component';
+import { FormFieldRenderer } from '../renderer/field/form-field-renderer.component';
 import { useFormProviderContext } from '../../provider/form-provider';
-import { FormGroup } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
 
-export const ObsGroup: React.FC<FormFieldInputProps> = ({ field, ...restProps }) => {
-  const { t } = useTranslation();
+export const ObsGroup: React.FC<FormFieldInputProps> = ({ field }) => {
   const { formFieldAdapters } = useFormProviderContext();
-  const showLabel = useMemo(() => field.questions?.length > 1, [field]);
 
-  const content = useMemo(
-    () =>
-      field.questions
-        ?.filter((child) => !child.isHidden)
-        .map((child, index) => {
-          const keyId = `${child.id}_${index}`;
+  const groupContent = field.questions
+    ?.filter((child) => !child.isHidden)
+    .map((child, index) => {
+      const keyId = child.id + '_' + index;
+      if (formFieldAdapters[child.type]) {
+        return (
+          <div className={classNames(styles.flexColumn)} key={keyId}>
+            <div className={styles.groupContainer}>
+              <FormFieldRenderer fieldId={child.id} valueAdapter={formFieldAdapters[child.type]} />
+            </div>
+          </div>
+        );
+      }
+    });
 
-          if (child.type === 'obsGroup' && isGroupField(child.questionOptions.rendering)) {
-            return (
-              <div key={keyId} className={styles.nestedGroupContainer}>
-                <ObsGroup field={child} {...restProps} />
-              </div>
-            );
-          } else if (formFieldAdapters[child.type]) {
-            return (
-              <div className={classNames(styles.flexColumn)} key={keyId}>
-                <div className={styles.groupContainer}>
-                  <FormFieldRenderer fieldId={child.id} valueAdapter={formFieldAdapters[child.type]} />
-                </div>
-              </div>
-            );
-          }
-        }),
-    [field],
-  );
-
-  return (
-    <div className={styles.groupContainer}>
-      {showLabel ? (
-        <FormGroup legendText={t(field.label)} className={styles.boldLegend}>
-          {content}
-        </FormGroup>
-      ) : (
-        content
-      )}
-    </div>
-  );
+  return <div className={styles.flexRow}>{groupContent}</div>;
 };
 
 export default ObsGroup;

package/src/components/group/obs-group.scss

@@ -10,7 +10,3 @@
 .groupContainer {
   margin: 0.5rem 0;
 }
-
-.boldLegend > legend {
-  font-weight: bolder;
-}

package/src/components/renderer/field/fieldLogic.ts

@@ -1,6 +1,6 @@
 import { codedTypes } from '../../../constants';
 import { type FormContextProps } from '../../../provider/form-provider';
-import { type FormField } from '../../../types';
+import { type FormFieldValidator, type SessionMode, type ValidationResult, type FormField } from '../../../types';
 import { isTrue } from '../../../utils/boolean-utils';
 import { hasRendering } from '../../../utils/common-utils';
 import { evaluateAsyncExpression, evaluateExpression } from '../../../utils/expression-runner';
@@ -65,6 +65,21 @@ function evaluateFieldDependents(field: FormField, values: any, context: FormCon
           },
         ).then((result) => {
           setValue(dependent.id, result);
+          // validate calculated value
+          const { errors, warnings } = validateFieldValue(dependent, result, context.formFieldValidators, {
+            formFields,
+            values,
+            expressionContext: { patient, mode: sessionMode },
+          });
+          if (!dependent.meta.submission) {
+            dependent.meta.submission = {};
+          }
+          dependent.meta.submission.errors = errors;
+          dependent.meta.submission.warnings = warnings;
+          if (!errors.length) {
+            context.formFieldAdapters[dependent.type].transformFieldValue(dependent, result, context);
+          }
+          updateFormField(dependent);
         });
       }
       // evaluate hide
@@ -212,3 +227,48 @@ function evaluateFieldDependents(field: FormField, values: any, context: FormCon
     setForm(formJson);
   }
 }
+
+export interface ValidatorConfig {
+  formFields: FormField[];
+  values: Record<string, any>;
+  expressionContext: {
+    patient: fhir.Patient;
+    mode: SessionMode;
+  };
+}
+
+export function validateFieldValue(
+  field: FormField,
+  value: any,
+  validators: Record<string, FormFieldValidator>,
+  context: ValidatorConfig,
+): { errors: ValidationResult[]; warnings: ValidationResult[] } {
+  const errors: ValidationResult[] = [];
+  const warnings: ValidationResult[] = [];
+
+  if (field.meta.submission?.unspecified) {
+    return { errors: [], warnings: [] };
+  }
+
+  try {
+    field.validators.forEach((validatorConfig) => {
+      const results = validators[validatorConfig.type]?.validate?.(field, value, {
+        ...validatorConfig,
+        ...context,
+      });
+      if (results) {
+        results.forEach((result) => {
+          if (result.resultType === 'error') {
+            errors.push(result);
+          } else if (result.resultType === 'warning') {
+            warnings.push(result);
+          }
+        });
+      }
+    });
+  } catch (error) {
+    console.error(error);
+  }
+
+  return { errors, warnings };
+}

package/src/components/renderer/field/form-field-renderer.component.tsx

@@ -21,7 +21,7 @@ import { getFieldControlWithFallback, getRegisteredControl } from '../../../regi
 import styles from './form-field-renderer.scss';
 import { isTrue } from '../../../utils/boolean-utils';
 import UnspecifiedField from '../../inputs/unspecified/unspecified.component';
-import { handleFieldLogic } from './fieldLogic';
+import { handleFieldLogic, validateFieldValue } from './fieldLogic';
 
 export interface FormFieldRendererProps {
   fieldId: string;
@@ -221,51 +221,6 @@ function ErrorFallback({ error }) {
   );
 }
 
-export interface ValidatorConfig {
-  formFields: FormField[];
-  values: Record<string, any>;
-  expressionContext: {
-    patient: fhir.Patient;
-    mode: SessionMode;
-  };
-}
-
-function validateFieldValue(
-  field: FormField,
-  value: any,
-  validators: Record<string, FormFieldValidator>,
-  context: ValidatorConfig,
-): { errors: ValidationResult[]; warnings: ValidationResult[] } {
-  const errors: ValidationResult[] = [];
-  const warnings: ValidationResult[] = [];
-
-  if (field.meta.submission?.unspecified) {
-    return { errors: [], warnings: [] };
-  }
-
-  try {
-    field.validators.forEach((validatorConfig) => {
-      const results = validators[validatorConfig.type]?.validate?.(field, value, {
-        ...validatorConfig,
-        ...context,
-      });
-      if (results) {
-        results.forEach((result) => {
-          if (result.resultType === 'error') {
-            errors.push(result);
-          } else if (result.resultType === 'warning') {
-            warnings.push(result);
-          }
-        });
-      }
-    });
-  } catch (error) {
-    console.error(error);
-  }
-
-  return { errors, warnings };
-}
-
 /**
  * Determines whether a field can be unspecified
  */
@@ -282,6 +237,6 @@ export function isUnspecifiedSupported(question: FormField) {
   );
 }
 
-export function isGroupField(rendering: RenderType) {
+function isGroupField(rendering: RenderType) {
   return rendering === 'group' || rendering === 'repeating';
 }

package/src/components/repeat/repeat.component.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormGroup } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import type { FormField, FormFieldInputProps, RenderType } from '../../types';
 import { evaluateAsyncExpression, evaluateExpression } from '../../utils/expression-runner';
@@ -77,7 +78,6 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
           });
         }
       }
-
       const clonedField = cloneRepeatField(field, null, counter);
       // run necessary expressions
       if (clonedField.type === 'obsGroup') {
@@ -168,7 +168,15 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
 
   return (
     <React.Fragment>
-      <div>{nodes}</div>
+      {isGrouped ? (
+        <div className={styles.container}>
+          <FormGroup legendText={t(field.label)} className={styles.boldLegend}>
+            {nodes}
+          </FormGroup>
+        </div>
+      ) : (
+        <div>{nodes}</div>
+      )}
     </React.Fragment>
   );
 };

package/src/form-engine.test.tsx

@@ -681,6 +681,8 @@ describe('Form engine component', () => {
 
   describe('Calculated values', () => {
     it('should evaluate BMI', async () => {
+      const saveEncounterMock = jest.spyOn(api, 'saveEncounter');
+
       await act(async () => renderForm(null, bmiForm));
 
       const bmiField = screen.getByRole('textbox', { name: /bmi/i });
@@ -694,9 +696,17 @@ describe('Form engine component', () => {
       expect(heightField).toHaveValue(150);
       expect(weightField).toHaveValue(50);
       expect(bmiField).toHaveValue('22.2');
+
+      await user.click(screen.getByRole('button', { name: /save/i }));
+
+      const encounter = saveEncounterMock.mock.calls[0][1];
+      expect(encounter.obs.length).toEqual(3);
+      expect(encounter.obs.find((obs) => obs.formFieldPath === 'rfe-forms-bmi').value).toBe(22.2);
     });
 
     it('should evaluate BSA', async () => {
+      const saveEncounterMock = jest.spyOn(api, 'saveEncounter');
+
       await act(async () => renderForm(null, bsaForm));
 
       const bsaField = screen.getByRole('textbox', { name: /bsa/i });
@@ -710,6 +720,12 @@ describe('Form engine component', () => {
       expect(heightField).toHaveValue(190.5);
       expect(weightField).toHaveValue(95);
       expect(bsaField).toHaveValue('2.24');
+
+      await user.click(screen.getByRole('button', { name: /save/i }));
+
+      const encounter = saveEncounterMock.mock.calls[0][1];
+      expect(encounter.obs.length).toEqual(3);
+      expect(encounter.obs.find((obs) => obs.formFieldPath === 'rfe-forms-bsa').value).toBe(2.24);
     });
 
     it('should evaluate EDD', async () => {

package/src/hooks/useFormFields.ts

@@ -1,45 +1,35 @@
 import { useMemo } from 'react';
-import { type FormField, type FormSchema } from '../types';
+import { type FormSchema, type FormField } from '../types';
 
 export function useFormFields(form: FormSchema): { formFields: FormField[]; conceptReferences: Set<string> } {
   const [flattenedFields, conceptReferences] = useMemo(() => {
-    const flattenedFieldsTemp: FormField[] = [];
+    const flattenedFieldsTemp = [];
     const conceptReferencesTemp = new Set<string>();
-
-    const flattenFields = (fields: FormField[]) => {
-      fields.forEach((field) => {
-        flattenedFieldsTemp.push(field);
-
-        // If the field is an obsGroup, we need to flatten its nested questions
-        if (field.type === 'obsGroup' && field.questions) {
-          field.questions.forEach((groupedField) => {
-            groupedField.meta.groupId = field.id;
-            flattenFields([groupedField]);
-          });
-        }
-
-        // Collect concept references
-        if (field.questionOptions?.concept) {
-          conceptReferencesTemp.add(field.questionOptions.concept);
-        }
-        if (field.questionOptions?.answers) {
-          field.questionOptions.answers.forEach((answer) => {
-            if (answer.concept) {
-              conceptReferencesTemp.add(answer.concept);
-            }
-          });
-        }
-      });
-    };
-
     form.pages?.forEach((page) =>
       page.sections?.forEach((section) => {
-        if (section.questions) {
-          flattenFields(section.questions);
-        }
+        section.questions?.forEach((question) => {
+          flattenedFieldsTemp.push(question);
+          if (question.type == 'obsGroup') {
+            question.questions.forEach((groupedField) => {
+              groupedField.meta.groupId = question.id;
+              flattenedFieldsTemp.push(groupedField);
+            });
+          }
+        });
       }),
     );
-
+    flattenedFieldsTemp.forEach((field) => {
+      if (field.questionOptions?.concept) {
+        conceptReferencesTemp.add(field.questionOptions.concept);
+      }
+      if (field.questionOptions?.answers) {
+        field.questionOptions.answers.forEach((answer) => {
+          if (answer.concept) {
+            conceptReferencesTemp.add(answer.concept);
+          }
+        });
+      }
+    });
     return [flattenedFieldsTemp, conceptReferencesTemp];
   }, [form]);
 

package/src/processors/encounter/encounter-form-processor.ts

@@ -100,7 +100,7 @@ export class EncounterFormProcessor extends FormProcessor {
         field.meta.fixedValue = field.value;
         delete field.value;
       }
-      if (field.questionOptions?.rendering == 'group' || field.type === 'obsGroup') {
+      if (field.questionOptions?.rendering == 'group') {
         field.questions?.forEach((child) => {
           child.readonly = child.readonly ?? field.readonly;
           return prepareFormField(child, section, page, schema);

package/src/processors/encounter/encounter-processor-helper.ts

@@ -1,16 +1,16 @@
 import {
+  type PatientProgram,
   type FormField,
-  type FormProcessorContextProps,
   type OpenmrsEncounter,
   type OpenmrsObs,
   type PatientIdentifier,
-  type PatientProgram,
   type PatientProgramPayload,
+  type FormProcessorContextProps,
 } from '../../types';
 import { saveAttachment, savePatientIdentifier, saveProgramEnrollment } from '../../api';
 import { hasRendering, hasSubmission } from '../../utils/common-utils';
 import dayjs from 'dayjs';
-import { assignedObsIds, constructObs, voidObs } from '../../adapters/obs-adapter';
+import { voidObs, constructObs, assignedObsIds } from '../../adapters/obs-adapter';
 import { type FormContextProps } from '../../provider/form-provider';
 import { ConceptTrue } from '../../constants';
 import { DefaultValueValidator } from '../../validators/default-value-validator';
@@ -185,53 +185,43 @@ export function getMutableSessionProps(context: FormContextProps) {
 // Helpers
 
 function prepareObs(obsForSubmission: OpenmrsObs[], fields: FormField[]) {
-  fields.filter((field) => hasSubmittableObs(field)).forEach((field) => processObsField(obsForSubmission, field));
-}
-
-function processObsField(obsForSubmission: OpenmrsObs[], field: FormField) {
-  if ((field.isHidden || field.isParentHidden) && field.meta.previousValue) {
-    const valuesArray = Array.isArray(field.meta.previousValue) ? field.meta.previousValue : [field.meta.previousValue];
-    addObsToList(
-      obsForSubmission,
-      valuesArray.map((obs) => voidObs(obs)),
-    );
-    return;
-  }
-
-  if (field.type === 'obsGroup') {
-    processObsGroup(obsForSubmission, field);
-  } else if (hasSubmission(field)) {
-    // For non-group obs with a submission
-    addObsToList(obsForSubmission, field.meta.submission.newValue);
-    addObsToList(obsForSubmission, field.meta.submission.voidedValue);
-  }
-}
-
-function processObsGroup(obsForSubmission: OpenmrsObs[], groupField: FormField) {
-  if (groupField.meta.submission?.voidedValue) {
-    addObsToList(obsForSubmission, groupField.meta.submission.voidedValue);
-    return;
-  }
-
-  const obsGroup = constructObs(groupField, null);
-  if (groupField.meta.previousValue) {
-    obsGroup.uuid = groupField.meta.previousValue.uuid;
-  }
-
-  groupField.questions.forEach((nestedField) => {
-    if (nestedField.type === 'obsGroup') {
-      const nestedObsGroup: OpenmrsObs[] = [];
-      processObsGroup(nestedObsGroup, nestedField);
-      addObsToList(obsGroup.groupMembers, nestedObsGroup);
-    } else if (hasSubmission(nestedField)) {
-      addObsToList(obsGroup.groupMembers, nestedField.meta.submission.newValue);
-      addObsToList(obsGroup.groupMembers, nestedField.meta.submission.voidedValue);
-    }
-  });
-
-  if (obsGroup.groupMembers?.length || obsGroup.voided) {
-    addObsToList(obsForSubmission, obsGroup);
-  }
+  fields
+    .filter((field) => hasSubmittableObs(field))
+    .forEach((field) => {
+      if ((field.isHidden || field.isParentHidden) && field.meta.previousValue) {
+        const valuesArray = Array.isArray(field.meta.previousValue)
+          ? field.meta.previousValue
+          : [field.meta.previousValue];
+        addObsToList(
+          obsForSubmission,
+          valuesArray.map((obs) => voidObs(obs)),
+        );
+        return;
+      }
+      if (field.type == 'obsGroup') {
+        if (field.meta.submission?.voidedValue) {
+          addObsToList(obsForSubmission, field.meta.submission.voidedValue);
+          return;
+        }
+        const obsGroup = constructObs(field, null);
+        if (field.meta.previousValue) {
+          obsGroup.uuid = field.meta.previousValue.uuid;
+        }
+        field.questions.forEach((groupedField) => {
+          if (hasSubmission(groupedField)) {
+            addObsToList(obsGroup.groupMembers, groupedField.meta.submission.newValue);
+            addObsToList(obsGroup.groupMembers, groupedField.meta.submission.voidedValue);
+          }
+        });
+        if (obsGroup.groupMembers.length || obsGroup.voided) {
+          addObsToList(obsForSubmission, obsGroup);
+        }
+      }
+      if (hasSubmission(field)) {
+        addObsToList(obsForSubmission, field.meta.submission.newValue);
+        addObsToList(obsForSubmission, field.meta.submission.voidedValue);
+      }
+    });
 }
 
 function prepareOrders(fields: FormField[]) {

package/src/transformers/default-schema-transformer.ts

@@ -1,4 +1,4 @@
-import { type FormField, type FormSchema, type FormSchemaTransformer, type RenderType } from '../types';
+import { type FormField, type FormSchemaTransformer, type FormSchema, type RenderType } from '../types';
 import { isTrue } from '../utils/boolean-utils';
 import { hasRendering } from '../utils/common-utils';
 
@@ -39,13 +39,8 @@ function handleQuestion(question: FormField, form: FormSchema) {
     setFieldValidators(question);
     transformByType(question);
     transformByRendering(question);
-
-    if (question.questions?.length) {
-      if (question.type === 'obsGroup' && question.questions.length) {
-        question.questions.forEach((nestedQuestion) => handleQuestion(nestedQuestion, form));
-      } else {
-        question.questions.forEach((nestedQuestion) => handleQuestion(nestedQuestion, form));
-      }
+    if (question?.questions?.length) {
+      question.questions.forEach((question) => handleQuestion(question, form));
     }
   } catch (error) {
     console.error(error);