@openmrs/esm-form-engine-lib 2.1.0-pre.1393 → 2.1.0-pre.1401

package/package.json

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

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

@@ -16,7 +16,7 @@ export const ObsGroup: React.FC<FormFieldInputProps> = ({ field }) => {
         return (
           <div className={classNames(styles.flexColumn)} key={keyId}>
             <div className={styles.groupContainer}>
-              <FormFieldRenderer field={child} valueAdapter={formFieldAdapters[child.type]} />
+              <FormFieldRenderer fieldId={child.id} valueAdapter={formFieldAdapters[child.type]} />
             </div>
           </div>
         );

package/src/components/inputs/workspace-launcher/workspace-launcher.component.tsx

@@ -23,12 +23,14 @@ const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
   };
 
   return (
-    <div>
-      <div className={styles.label}>{t(field.label)}</div>
-      <div className={styles.workspaceButton}>
-        <Button onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
+    !field.isHidden && (
+      <div>
+        <div className={styles.label}>{t(field.label)}</div>
+        <div className={styles.workspaceButton}>
+          <Button onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
+        </div>
       </div>
-    </div>
+    )
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   type FormField,
   type RenderType,
@@ -24,14 +24,14 @@ import { getFieldControlWithFallback } from '../../../utils/form-helper';
 import { handleFieldLogic } from './fieldLogic';
 
 export interface FormFieldRendererProps {
-  field: FormField;
+  fieldId: string;
   valueAdapter: FormFieldValueAdapter;
   repeatOptions?: {
     targetRendering: RenderType;
   };
 }
 
-export const FormFieldRenderer = ({ field, valueAdapter, repeatOptions }: FormFieldRendererProps) => {
+export const FormFieldRenderer = ({ fieldId, valueAdapter, repeatOptions }: FormFieldRendererProps) => {
   const [inputComponentWrapper, setInputComponentWrapper] = useState<{
     value: React.ComponentType<FormFieldInputProps>;
   }>(null);
@@ -50,9 +50,11 @@ export const FormFieldRenderer = ({ field, valueAdapter, repeatOptions }: FormFi
     removeInvalidField,
   } = context;
 
-  const fieldValue = useWatch({ control, name: field.id, exact: true });
+  const fieldValue = useWatch({ control, name: fieldId, exact: true });
   const noop = () => {};
 
+  const field = useMemo(() => formFields.find((field) => field.id === fieldId), [fieldId, formFields]);
+
   useEffect(() => {
     if (hasRendering(field, 'repeating') && repeatOptions?.targetRendering) {
       getRegisteredControl(repeatOptions.targetRendering).then((component) => {

package/src/components/renderer/section/section-renderer.component.tsx

@@ -12,7 +12,11 @@ export const SectionRenderer = ({ section }: { section: FormSection }) => {
       {section.questions.map((question) =>
         formFieldAdapters[question.type] ? (
           <div key={`${sectionId}-${question.id}`} className={styles.sectionBody}>
-            <FormFieldRenderer key={question.id} field={question} valueAdapter={formFieldAdapters[question.type]} />
+            <FormFieldRenderer
+              key={question.id}
+              fieldId={question.id}
+              valueAdapter={formFieldAdapters[question.type]}
+            />
           </div>
         ) : null,
       )}

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

@@ -129,7 +129,7 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
     return rows.map((field, index) => {
       const component = (
         <FormFieldRenderer
-          field={field}
+          fieldId={field.id}
           valueAdapter={formFieldAdapters[field.type]}
           repeatOptions={{ targetRendering: getQuestionWithSupportedRendering(field).questionOptions.rendering }}
         />

package/src/hooks/useFormStateHelpers.ts

@@ -7,7 +7,7 @@ export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: Form
     dispatch({ type: 'ADD_FORM_FIELD', value: field });
   }, []);
   const updateFormField = useCallback((field: FormField) => {
-    dispatch({ type: 'UPDATE_FORM_FIELD', value: field });
+    dispatch({ type: 'UPDATE_FORM_FIELD', value: structuredClone(field) });
   }, []);
 
   const getFormField = useCallback(