(fix) Properly sanitize and initialize cloned fields (#429)

* Properly sanitize and initialize cloned fields

* Fix tests

Author: samuelmale

src/components/inputs/text/text.component.tsx

@@ -42,7 +42,9 @@ const TextField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnin
           <TextInput
             id={field.id}
             labelText={<FieldLabel field={field} />}
-            onChange={setFieldValue}
+            onChange={(event) => {
+              setFieldValue(event.target.value);
+            }}
             onBlur={onBlur}
             name={field.id}
             value={value}

src/components/inputs/text/text.test.tsx

@@ -161,17 +161,11 @@ describe('Text field input', () => {
   it('should record new obs', async () => {
     await renderForm(textValues);
     const inputField = screen.getByLabelText('Indicate your notes');
-
-    await user.type(inputField, 'Updated patient notes');
+    await user.click(inputField);
+    await user.paste('Updated patient notes');
 
     await act(async () => {
-      expect(mockSetFieldValue).toHaveBeenCalledWith(
-        expect.objectContaining({
-          target: expect.objectContaining({
-            value: 'Updated patient notes',
-          }),
-        }),
-      );
+      expect(mockSetFieldValue).toHaveBeenCalledWith('Updated patient notes');
     });
   });
 

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

@@ -6,7 +6,6 @@ import { formStateReducer, initialState } from './state';
 import { useEvaluateFormFieldExpressions } from '../../../hooks/useEvaluateFormFieldExpressions';
 import { useFormFactory } from '../../../provider/form-factory-provider';
 import { FormProvider, type FormContextProps } from '../../../provider/form-provider';
-import { isTrue } from '../../../utils/boolean-utils';
 import { type FormProcessorContextProps } from '../../../types';
 import { useFormStateHelpers } from '../../../hooks/useFormStateHelpers';
 import { pageObserver } from '../../sidebar/page-observer';

src/components/repeat/helpers.ts

@@ -15,6 +15,7 @@ export function cloneRepeatField(srcField: FormField, value: OpenmrsResource, id
     childField.id = `${childField.id}_${idSuffix}`;
     childField.meta.groupId = clonedField.id;
     childField.meta.previousValue = null;
+    childField.fieldDependents = new Set();
     clearSubmission(childField);
 
     // cleanup expressions

src/components/repeat/repeat.component.tsx

@@ -47,12 +47,13 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
 
   const handleAdd = useCallback(
     (counter: number) => {
+      const clonedFieldsBuffer: FormField[] = [];
       function evaluateExpressions(field: FormField) {
         if (field.hide?.hideWhenExpression) {
           field.isHidden = evaluateExpression(
             field.hide.hideWhenExpression,
             { value: field, type: 'field' },
-            formFields,
+            [...formFields, ...clonedFieldsBuffer],
             getValues(),
             {
               mode: sessionMode,
@@ -64,7 +65,7 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
           evaluateAsyncExpression(
             field.questionOptions.calculate?.calculateExpression,
             { value: field, type: 'field' },
-            formFields,
+            [...formFields, ...clonedFieldsBuffer],
             getValues(),
             {
               mode: sessionMode,
@@ -80,16 +81,19 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
       }
 
       const clonedField = cloneRepeatField(field, null, counter);
-      // run necessary expressions
+      clonedFieldsBuffer.push(clonedField);
+
+      // Handle nested questions
       if (clonedField.type === 'obsGroup') {
         clonedField.questions?.forEach((childField) => {
-          evaluateExpressions(childField);
-          addFormField(childField);
+          clonedFieldsBuffer.push(childField);
         });
-      } else {
-        evaluateExpressions(clonedField);
       }
-      addFormField(clonedField);
+
+      clonedFieldsBuffer.forEach((field) => {
+        evaluateExpressions(field);
+        addFormField(field);
+      });
       setRows([...rows, clonedField]);
     },
     [formFields, field, rows, context],

src/hooks/useFormStateHelpers.ts

@@ -8,9 +8,24 @@ export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: Form
   const addFormField = useCallback((field: FormField) => {
     dispatch({ type: 'ADD_FORM_FIELD', value: field });
   }, []);
-  const updateFormField = useCallback((field: FormField) => {
-    dispatch({ type: 'UPDATE_FORM_FIELD', value: cloneDeep(field) });
-  }, []);
+  const updateFormField = useCallback(
+    (field: FormField) => {
+      if (field.meta.groupId) {
+        const group = formFields.find((f) => f.id === field.meta.groupId);
+        if (group) {
+          group.questions = group.questions.map((child) => {
+            if (child.id === field.id) {
+              return field;
+            }
+            return child;
+          });
+          updateFormField(group);
+        }
+      }
+      dispatch({ type: 'UPDATE_FORM_FIELD', value: cloneDeep(field) });
+    },
+    [formFields],
+  );
 
   const getFormField = useCallback(
     (fieldId: string) => {