@openmrs/esm-form-engine-lib 3.1.4-pre.1779 → 3.1.4-pre.1783

package/__mocks__/forms/afe-forms/index.ts

@@ -0,0 +1,9 @@
+export { default as artComponentSkeleton } from './component-art.json';
+export { default as demoHtsOpenmrsForm } from './demo-hts-form.json';
+export { default as formComponentSkeleton } from './form-component.json';
+export { default as miniFormSkeleton } from './mini-form.json';
+export { default as nestedForm1Skeleton } from './nested-form1.json';
+export { default as nestedForm2Skeleton } from './nested-form2.json';
+export { default as preclinicReviewComponentSkeleton } from './component-preclinic-review.json';
+export { default as testForm } from './test-schema-transformer-form.json';
+export { default as testOrdersForm } from './test-orders.json';

package/__mocks__/forms/index.ts

@@ -0,0 +1,19 @@
+// RFE Forms
+export * from './rfe-forms';
+
+// AFE Forms
+export * from './afe-forms';
+
+// Form Components
+export { default as artComponentBody } from './rfe-forms/component-art.json';
+export { default as artComponentSkeleton } from './afe-forms/component-art.json';
+export { default as formComponentBody } from './rfe-forms/form-component.json';
+export { default as formComponentSkeleton } from './afe-forms/form-component.json';
+export { default as miniFormBody } from './rfe-forms/mini-form.json';
+export { default as miniFormSkeleton } from './afe-forms/mini-form.json';
+export { default as nestedForm1Body } from './rfe-forms/nested-form1.json';
+export { default as nestedForm1Skeleton } from './afe-forms/nested-form1.json';
+export { default as nestedForm2Body } from './rfe-forms/nested-form2.json';
+export { default as nestedForm2Skeleton } from './afe-forms/nested-form2.json';
+export { default as preclinicReviewComponentBody } from './rfe-forms/component-preclinic-review.json';
+export { default as preclinicReviewComponentSkeleton } from './afe-forms/component-preclinic-review.json';

package/__mocks__/forms/rfe-forms/index.ts

@@ -0,0 +1,50 @@
+export { default as ageValidationForm } from './age-validation-form.json';
+export { default as artComponentBody } from './component-art.json';
+export { default as bmiForAgeScoreTestSchema } from './zscore-bmi-for-age-form.json';
+export { default as bmiForm } from './bmi-test-form.json';
+export { default as bsaForm } from './bsa-test-form.json';
+export { default as conditionalAnsweredForm } from './conditional-answered-form.json';
+export { default as conditionalRequiredTestForm } from './conditional-required-form.json';
+export { default as defaultValuesForm } from './default-values-form.json';
+export { default as demoHtsForm } from './demo-hts-form.json';
+export { default as diagnosisForm } from './diagnosis-test-form.json';
+export { default as eddForm } from './edd-test-form.json';
+export { default as externalDataSourceForm } from './external-data-source-form.json';
+export { default as filterAnswerOptionsTestForm } from './filter-answer-options-test-form.json';
+export { default as formComponentBody } from './form-component.json';
+export { default as heightForAgeZscoreTestSchema } from './zscore-height-for-age-form.json';
+export { default as hidePagesAndSectionsForm } from './hide-pages-and-sections-form.json';
+export { default as historicalExpressionsForm } from './historical-expressions-form.json';
+export { default as htsPocForm } from './demo-hts-form.json';
+export { default as jsExpressionValidationForm } from './js-expression-validation-form.json';
+export { default as labourAndDeliveryTestForm } from './labour-and-delivery-test-form.json';
+export { default as miniFormBody } from './mini-form.json';
+export { default as mockConceptsForm } from './sample-fields.json';
+export { default as mockHxpEncounter } from './mock-historical-visits-encounter.json';
+export { default as mockSaveEncounter } from './mock-save-encounter.json';
+export { default as monthsOnArtForm } from './months-on-art-form.json';
+export { default as multiSelectFormSchema } from './multi-select-form.json';
+export { default as nestedForm1Body } from './nested-form1.json';
+export { default as nestedForm2Body } from './nested-form2.json';
+export { default as nextVisitForm } from './next-visit-test-form.json';
+export { default as obsGroupTestForm } from './obs-group-test-form.json';
+export { default as postSubmissionTestForm } from './post-submission-test-form.json';
+export { default as preclinicReviewComponentBody } from './component-preclinic-review.json';
+export { default as radioButtonFormSchema } from './radio-button-form.json';
+export { default as readOnlyValidationForm } from './read-only-validation-form.json';
+export { default as referenceByMappingForm } from './reference-by-mapping-form.json';
+export { default as requiredTestForm } from './required-form.json';
+export { default as sampleFieldsForm } from './sample-fields.json';
+export { default as testEnrolmentForm } from './test-enrolment-form.json';
+export { default as uiSelectExtForm } from './sample-ui-select-ext.json';
+export { default as unspecifiedForm } from './sample-unspecified-form.json';
+export { default as viralLoadStatusForm } from './viral-load-status-form.json';
+export { default as weightForHeightZscoreTestSchema } from './zscore-weight-height-form.json';
+
+export { obsList } from './obs-list-data';
+export {
+  htsHivtestResultingSchemaV2,
+  htsRetrospectiveResultingSchemaV2,
+  htsWildcardResultingSchemaV2,
+  testSchemaV2,
+} from './forms-loader.test.schema';

package/__mocks__/index.ts

@@ -0,0 +1,85 @@
+// Form mocks
+export * from './forms';
+
+// Patient mocks
+export { mockPatient } from './patient.mock';
+
+// Session mocks
+export { mockSessionDataResponse } from './session.mock';
+export { mockVisit } from './visit.mock';
+
+// Form schemas
+export { default as ageValidationForm } from './forms/rfe-forms/age-validation-form.json';
+export { default as bmiForAgeScoreTestSchema } from './forms/rfe-forms/zscore-bmi-for-age-form.json';
+export { default as bmiForm } from './forms/rfe-forms/bmi-test-form.json';
+export { default as bsaForm } from './forms/rfe-forms/bsa-test-form.json';
+export { default as conditionalAnsweredForm } from './forms/rfe-forms/conditional-answered-form.json';
+export { default as conditionalRequiredTestForm } from './forms/rfe-forms/conditional-required-form.json';
+export { default as defaultValuesForm } from './forms/rfe-forms/default-values-form.json';
+export { default as demoHtsForm } from './forms/rfe-forms/demo-hts-form.json';
+export { default as demoHtsOpenmrsForm } from './forms/afe-forms/demo-hts-form.json';
+export { default as diagnosisForm } from './forms/rfe-forms/diagnosis-test-form.json';
+export { default as eddForm } from './forms/rfe-forms/edd-test-form.json';
+export { default as externalDataSourceForm } from './forms/rfe-forms/external-data-source-form.json';
+export { default as filterAnswerOptionsTestForm } from './forms/rfe-forms/filter-answer-options-test-form.json';
+export { default as heightForAgeZscoreTestSchema } from './forms/rfe-forms/zscore-height-for-age-form.json';
+export { default as hidePagesAndSectionsForm } from './forms/rfe-forms/hide-pages-and-sections-form.json';
+export { default as historicalExpressionsForm } from './forms/rfe-forms/historical-expressions-form.json';
+export { default as htsPocForm } from './forms/rfe-forms/demo-hts-form.json';
+export { default as jsExpressionValidationForm } from './forms/rfe-forms/js-expression-validation-form.json';
+export { default as labourAndDeliveryTestForm } from './forms/rfe-forms/labour-and-delivery-test-form.json';
+export { default as mockConceptsForm } from './forms/rfe-forms/sample-fields.json';
+export { default as mockHxpEncounter } from './forms/rfe-forms/mock-historical-visits-encounter.json';
+export { default as mockSaveEncounter } from './forms/rfe-forms/mock-save-encounter.json';
+export { default as monthsOnArtForm } from './forms/rfe-forms/months-on-art-form.json';
+export { default as multiSelectFormSchema } from './forms/rfe-forms/multi-select-form.json';
+export { default as nextVisitForm } from './forms/rfe-forms/next-visit-test-form.json';
+export { default as obsGroupTestForm } from './forms/rfe-forms/obs-group-test-form.json';
+export { default as postSubmissionTestForm } from './forms/rfe-forms/post-submission-test-form.json';
+export { default as radioButtonFormSchema } from './forms/rfe-forms/radio-button-form.json';
+export { default as readOnlyValidationForm } from './forms/rfe-forms/read-only-validation-form.json';
+export { default as referenceByMappingForm } from './forms/rfe-forms/reference-by-mapping-form.json';
+export { default as requiredTestForm } from './forms/rfe-forms/required-form.json';
+export { default as sampleFieldsForm } from './forms/rfe-forms/sample-fields.json';
+export { default as testEnrolmentForm } from './forms/rfe-forms/test-enrolment-form.json';
+export { default as testForm } from './forms/afe-forms/test-schema-transformer-form.json';
+export { default as testOrdersForm } from './forms/afe-forms/test-orders.json';
+export { default as uiSelectExtForm } from './forms/rfe-forms/sample-ui-select-ext.json';
+export { default as viralLoadStatusForm } from './forms/rfe-forms/viral-load-status-form.json';
+export { default as weightForHeightZscoreTestSchema } from './forms/rfe-forms/zscore-weight-height-form.json';
+
+// Form components
+export { default as artComponentBody } from './forms/rfe-forms/component-art.json';
+export { default as artComponentSkeleton } from './forms/afe-forms/component-art.json';
+export { default as formComponentBody } from './forms/rfe-forms/form-component.json';
+export { default as formComponentSkeleton } from './forms/afe-forms/form-component.json';
+export { default as miniFormBody } from './forms/rfe-forms/mini-form.json';
+export { default as miniFormSkeleton } from './forms/afe-forms/mini-form.json';
+export { default as nestedForm1Body } from './forms/rfe-forms/nested-form1.json';
+export { default as nestedForm1Skeleton } from './forms/afe-forms/nested-form1.json';
+export { default as nestedForm2Body } from './forms/rfe-forms/nested-form2.json';
+export { default as nestedForm2Skeleton } from './forms/afe-forms/nested-form2.json';
+export { default as preclinicReviewComponentBody } from './forms/rfe-forms/component-preclinic-review.json';
+export { default as preclinicReviewComponentSkeleton } from './forms/afe-forms/component-preclinic-review.json';
+
+// Concepts
+export { default as mockConcepts } from './concepts.mock.json';
+
+export { obsList } from './forms/rfe-forms/obs-list-data';
+export {
+  testSchemaV2,
+  htsRetrospectiveResultingSchemaV2,
+  htsHivtestResultingSchemaV2,
+  htsWildcardResultingSchemaV2,
+} from './forms/rfe-forms/forms-loader.test.schema';
+
+export const formMocks = {
+  rfe: {
+    ageValidation: require('./forms/rfe-forms/age-validation-form.json'),
+    bmiForAge: require('./forms/rfe-forms/zscore-bmi-for-age-form.json'),
+    // ... other RFE forms
+  },
+  afe: {
+    // ... AFE forms
+  },
+} as const;

package/__mocks__/single-spa-react.js

@@ -1,11 +1,6 @@
-// In __mocks__/single-spa-react.js
-//import context from "../src/view-components/widget/testHelpers";
-const React = require("react");
-//const context = require("../src/view-components/widget/testHelpers");
+import React, { createContext } from 'react';
+import { jest } from '@jest/globals';
 
-const SingleSpaContext = React.createContext({ mountParcel: () => jest.fn() });
+const SingleSpaContext = createContext({ mountParcel: () => jest.fn() });
 
-//constexport default mock;
-module.exports = {
-  SingleSpaContext: SingleSpaContext
-};
+export { SingleSpaContext };

package/jest.config.js

@@ -26,6 +26,6 @@ module.exports = {
     'react-markdown': '<rootDir>/__mocks__/react-markdown.tsx',
     '^uuid$': '<rootDir>/node_modules/uuid/dist/index.js',
   },
-  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
   testEnvironment: 'jsdom',
 };

package/package.json

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

package/src/components/inputs/date/date.component.tsx

@@ -1,17 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Layer, TimePicker } from '@carbon/react';
-import classNames from 'classnames';
-import { type FormFieldInputProps } from '../../../types';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
+import { formatDateAsDisplayString } from '../../../utils/common-utils';
+import { isEmpty } from '../../../validators/form-validator';
 import { isTrue } from '../../../utils/boolean-utils';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';
-import { isEmpty } from '../../../validators/form-validator';
-import FieldValueView from '../../value/view/field-value-view.component';
-import styles from './date.scss';
-import { OpenmrsDatePicker } from '@openmrs/esm-framework';
 import { useFormProviderContext } from '../../../provider/form-provider';
+import { type FormFieldInputProps } from '../../../types';
 import FieldLabel from '../../field-label/field-label.component';
-import { formatDateAsDisplayString } from '../../../utils/common-utils';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './date.scss';
 
 const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();

package/src/components/inputs/date/date.test.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { act, render, screen } from '@testing-library/react';
-import { useFormProviderContext } from 'src/provider/form-provider';
+import { type FormField } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
 import DateField from './date.component';
-import { type FormField } from 'src/types';
-import { OpenmrsDatePicker } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
 
 jest.mock('src/provider/form-provider', () => ({
   useFormProviderContext: jest.fn(),
@@ -13,24 +11,6 @@ jest.mock('src/provider/form-provider', () => ({
 const mockUseFormProviderContext = useFormProviderContext as jest.Mock;
 const mockSetFieldValue = jest.fn();
 
-const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
-
-mockOpenmrsDatePicker.mockImplementation(({ id, labelText, value, onChange, isInvalid, invalidText }) => {
-  return (
-    <>
-      <label htmlFor={id}>{labelText}</label>
-      <input
-        id={id}
-        value={value ? dayjs(value as unknown as string).format('DD/MM/YYYY') : ''}
-        onChange={(evt) => {
-          onChange(dayjs(evt.target.value).toDate());
-        }}
-      />
-      {isInvalid && <span>{invalidText}</span>}
-    </>
-  );
-});
-
 const dateFieldMock: FormField = {
   id: 'test-date-field',
   label: 'Test Date Field',

package/src/components/inputs/markdown/markdown.component.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import MarkdownWrapper from './markdown-wrapper.component';
 import { type FormFieldInputProps } from '../../../types';
+import MarkdownWrapper from './markdown-wrapper.component';
 
 const Markdown: React.FC<FormFieldInputProps> = ({ field }) => {
   const { t } = useTranslation();
-  return !field.isHidden && <MarkdownWrapper
-    markdown={t(field.value, { defaultValue: field.value, interpolation: { escapeValue: false } })}
-  />;
+  const markdownContent =
+    typeof field.value === 'string'
+      ? t(field.value, { defaultValue: field.value, interpolation: { escapeValue: false } })
+      : field.value;
+
+  return !field.isHidden && <MarkdownWrapper markdown={markdownContent} />;
 };
+
 export default Markdown;

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -1,21 +1,21 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { FilterableMultiSelect, Layer, Tag, CheckboxGroup, Checkbox } from '@carbon/react';
+import { Checkbox, CheckboxGroup, FilterableMultiSelect, Layer, Tag } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { isTrue } from '../../../utils/boolean-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
 import { type FormFieldInputProps } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
 import { ValueEmpty } from '../../value/value.component';
-import { shouldUseInlineLayout } from '../../../utils/form-helper';
-import { isTrue } from '../../../utils/boolean-utils';
+import FieldLabel from '../../field-label/field-label.component';
 import FieldValueView from '../../value/view/field-value-view.component';
 import styles from './multi-select.scss';
-import { useFormProviderContext } from '../../../provider/form-provider';
-import FieldLabel from '../../field-label/field-label.component';
 
 const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
   const [counter, setCounter] = useState(0);
   const [initiallyCheckedQuestionItems, setInitiallyCheckedQuestionItems] = useState([]);
   const isFirstRender = useRef(true);
-  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
 
   const selectOptions = field.questionOptions.answers
     .filter((answer) => !answer.isHidden)
@@ -117,18 +117,14 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                 {field.questionOptions.answers?.map((value, index) => {
                   return (
                     <Checkbox
-                      key={`${field.id}-${value.concept}`}
                       className={styles.checkbox}
-                      labelText={t(value.label)}
-                      id={`${field.id}-${value.concept}`}
-                      onChange={() => {
-                        handleSelectCheckbox(value);
-                      }}
-                      name={value.concept}
-                      defaultChecked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
                       checked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
-                      onBlur={onblur}
                       disabled={value.disable?.isDisabled}
+                      id={`${field.id}-${value.concept}`}
+                      key={`${field.id}-${value.concept}-${index}`}
+                      labelText={t(value.label)}
+                      name={value.concept}
+                      onChange={() => handleSelectCheckbox(value)}
                       readOnly={isTrue(field.readonly)}
                     />
                   );

package/src/components/inputs/multi-select/multi-select.test.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act, render, screen } from '@testing-library/react';
 import { type FetchResponse, openmrsFetch, usePatient, useSession } from '@openmrs/esm-framework';
 import { type FormSchema } from '../../../types';
-import { mockPatient } from '__mocks__/patient.mock';
-import { mockSessionDataResponse } from '__mocks__/session.mock';
-import { mockVisit } from '__mocks__/visit.mock';
-import multiSelectFormSchema from '__mocks__/forms/rfe-forms/multi-select-form.json';
+import { mockPatient, mockSessionDataResponse, mockVisit } from '__mocks__';
+import { multiSelectFormSchema } from '__mocks__/forms';
 import FormEngine from '../../../form-engine.component';
-global.ResizeObserver = require('resize-observer-polyfill');
 
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockUseSession = jest.mocked(useSession);

package/src/components/inputs/number/number.component.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useMemo } from 'react';
-import { Layer, NumberInput } from '@carbon/react';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, NumberInput } from '@carbon/react';
+import { isEmpty } from '../../../validators/form-validator';
 import { isTrue } from '../../../utils/boolean-utils';
-import { shouldUseInlineLayout } from '../../../utils/form-helper';
-import FieldValueView from '../../value/view/field-value-view.component';
 import { type FormFieldInputProps } from '../../../types';
-import styles from './number.scss';
-import { useTranslation } from 'react-i18next';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
 import { useFormProviderContext } from '../../../provider/form-provider';
 import FieldLabel from '../../field-label/field-label.component';
-import { isEmpty } from '../../../validators/form-validator';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './number.scss';
 
 const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();

package/src/components/inputs/number/number.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { act, render, screen, fireEvent } from '@testing-library/react';
-import { useFormProviderContext } from 'src/provider/form-provider';
+import userEvent from '@testing-library/user-event';
+import { act, render, screen } from '@testing-library/react';
+import { useFormProviderContext } from '../../../provider/form-provider';
 import NumberField from './number.component';
 
-jest.mock('src/provider/form-provider', () => ({
+jest.mock('../../../provider/form-provider', () => ({
   useFormProviderContext: jest.fn(),
 }));
 
@@ -64,6 +65,7 @@ describe('NumberField Component', () => {
   });
 
   it('calls setFieldValue on input change', async () => {
+    const user = userEvent.setup();
     const mockSetFieldValue = jest.fn();
 
     await renderNumberField({
@@ -75,7 +77,7 @@ describe('NumberField Component', () => {
     });
 
     const inputElement = screen.getByLabelText('Weight(kg):') as HTMLInputElement;
-    fireEvent.change(inputElement, { target: { value: '150' } });
+    await user.type(inputElement, '150');
 
     expect(mockSetFieldValue).toHaveBeenCalledWith(150);
   });

package/src/components/inputs/radio/radio.component.tsx

@@ -4,10 +4,10 @@ import { FormGroup, RadioButtonGroup, RadioButton } from '@carbon/react';
 import { type FormFieldInputProps } from '../../../types';
 import { isTrue } from '../../../utils/boolean-utils';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';
-import FieldValueView from '../../value/view/field-value-view.component';
-import styles from './radio.scss';
 import { useFormProviderContext } from '../../../provider/form-provider';
 import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './radio.scss';
 
 const Radio: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();

package/src/components/inputs/radio/radio.test.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { act, render, screen } from '@testing-library/react';
 import { type FetchResponse, openmrsFetch, usePatient, useSession } from '@openmrs/esm-framework';
-import { mockPatient } from '__mocks__/patient.mock';
-import { mockSessionDataResponse } from '__mocks__/session.mock';
-import { mockVisit } from '__mocks__/visit.mock';
-import radioButtonFormSchema from '__mocks__/forms/rfe-forms/radio-button-form.json';
-import Radio from './radio.component';
+import { mockPatient, mockSessionDataResponse, mockVisit } from '__mocks__';
+import { radioButtonFormSchema } from '__mocks__/forms';
 import { useFormProviderContext } from 'src/provider/form-provider';
+import Radio from './radio.component';
 
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockUseSession = jest.mocked(useSession);

package/src/components/inputs/select/dropdown.component.tsx

@@ -69,6 +69,7 @@ const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
             invalidText={errors[0]?.message}
             items={items}
             itemToString={itemToString}
+            label=""
             onChange={handleChange}
             readOnly={isTrue(field.readonly)}
             selectedItem={isEmpty(value) ? NullSelectOption : value}

package/src/components/inputs/select/dropdown.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import Dropdown from './dropdown.component';
 import { type FormField } from '../../../types';
 import { type OpenmrsResource } from '@openmrs/esm-framework';
+import Dropdown from './dropdown.component';
 
 const question: FormField = {
   label: 'Patient past program.',

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

@@ -1,18 +1,18 @@
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, TextInput } from '@carbon/react';
-import styles from './text.scss';
 import { useFormProviderContext } from '../../../provider/form-provider';
 import { type FormFieldInputProps } from '../../../types';
 import { isTrue } from '../../../utils/boolean-utils';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';
 import FieldValueView from '../../value/view/field-value-view.component';
 import FieldLabel from '../../field-label/field-label.component';
+import styles from './text.scss';
 
 const TextField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();
-  const [lastBlurredValue, setLastBlurredValue] = useState(null);
   const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+  const [lastBlurredValue, setLastBlurredValue] = useState(null);
 
   const onBlur = (event) => {
     event.preventDefault();
@@ -40,21 +40,21 @@ const TextField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnin
       <div className={styles.boldedLabel}>
         <Layer>
           <TextInput
+            disabled={field.isDisabled}
             id={field.id}
+            invalid={errors.length > 0}
+            invalidText={errors[0]?.message}
             labelText={<FieldLabel field={field} />}
+            maxLength={field.questionOptions.max || TextInput.maxLength}
+            name={field.id}
+            onBlur={onBlur}
             onChange={(event) => {
               setFieldValue(event.target.value);
             }}
-            onBlur={onBlur}
-            name={field.id}
-            value={value}
-            disabled={field.isDisabled}
             readOnly={isTrue(field.readonly)}
-            invalid={errors.length > 0}
-            invalidText={errors[0]?.message}
+            value={value ?? ''}
             warn={warnings.length > 0}
             warnText={warnings.length > 0 ? warnings[0].message : undefined}
-            maxLength={field.questionOptions.max || TextInput.maxLength}
           />
         </Layer>
       </div>

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

@@ -1,13 +1,13 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import { render, screen, act } from '@testing-library/react';
-import TextField from './text.component';
 import { type FetchResponse, openmrsFetch, usePatient, useSession } from '@openmrs/esm-framework';
 import { mockSessionDataResponse } from '__mocks__/session.mock';
 import { mockPatient } from '__mocks__/patient.mock';
 import { mockVisit } from '__mocks__/visit.mock';
-import textFieldFormJson from '__mocks__/forms/rfe-forms/sample_fields.json';
 import { useFormProviderContext } from 'src/provider/form-provider';
-import userEvent from '@testing-library/user-event';
+import { sampleFieldsForm } from '__mocks__/forms';
+import TextField from './text.component';
 
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockUseSession = jest.mocked(useSession);
@@ -128,7 +128,7 @@ const mockProviderValues = {
   formFieldAdapters: {},
   patient: mockPatient,
   methods: undefined,
-  formJson: textFieldFormJson as any,
+  formJson: sampleFieldsForm,
   visit: mockVisit,
   sessionDate: new Date(),
   location: mockVisit.location,
@@ -143,7 +143,7 @@ describe('Text field input', () => {
       getInitialValues: jest.fn(),
     };
     mockOpenmrsFetch.mockResolvedValue({
-      data: { results: [{ ...textFieldFormJson }] },
+      data: { results: [{ ...sampleFieldsForm }] },
     } as unknown as FetchResponse);
     mockUseSession.mockReturnValue(mockSessionDataResponse.data);
     mockUsePatient.mockReturnValue({

package/src/components/inputs/text-area/text-area.component.tsx

@@ -4,10 +4,10 @@ import { Layer, TextArea as TextAreaInput } from '@carbon/react';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';
 import { isTrue } from '../../../utils/boolean-utils';
 import { type FormFieldInputProps } from '../../../types';
-import FieldValueView from '../../value/view/field-value-view.component';
-import styles from './text-area.scss';
 import { useFormProviderContext } from '../../../provider/form-provider';
 import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './text-area.scss';
 
 const TextArea: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();

package/src/components/inputs/toggle/toggle.component.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Toggle as ToggleInput } from '@carbon/react';
 import { type FormFieldInputProps } from '../../../types';
 import { isTrue } from '../../../utils/boolean-utils';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';
-import FieldValueView from '../../value/view/field-value-view.component';
 import { isEmpty } from '../../../validators/form-validator';
-import styles from './toggle.scss';
-import { useTranslation } from 'react-i18next';
 import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './toggle.scss';
 
 const Toggle: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();