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

package/package.json

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

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

@@ -6,29 +6,43 @@ import { isTrue } from '../../../utils/boolean-utils';
 import { type FormFieldInputProps } from '../../../types';
 import FieldValueView from '../../value/view/field-value-view.component';
 import FieldLabel from '../../field-label/field-label.component';
-
-import styles from './dropdown.scss';
 import { useFormProviderContext } from '../../../provider/form-provider';
+import { NullSelectOption } from '../../../constants';
+import { isEmpty } from '../../../validators/form-validator';
+import styles from './dropdown.scss';
 
 const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();
   const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
 
   const handleChange = useCallback(
-    (value) => {
-      setFieldValue(value);
+    ({ selectedItem }) => {
+      setFieldValue(selectedItem === NullSelectOption ? null : selectedItem);
     },
     [setFieldValue],
   );
 
   const itemToString = useCallback(
     (item) => {
-      const answer = field.questionOptions.answers.find((opt) => (opt.value ? opt.value == item : opt.concept == item));
+      let answer = field.questionOptions.answers.find((opt) => {
+        return opt.value ? opt.value == item : opt.concept == item;
+      });
       return answer?.label;
     },
     [field.questionOptions.answers],
   );
 
+  const items = useMemo(() => {
+    const options = field.questionOptions.answers;
+    if (!options.some((option) => option.value === NullSelectOption)) {
+      options.unshift({
+        value: NullSelectOption,
+        label: t('chooseAnOption', 'Choose an option'),
+      });
+    }
+    return options.filter((option) => !option.isHidden).map((item) => item.value || item.concept);
+  }, [field.questionOptions.answers]);
+
   const isInline = useMemo(() => {
     if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
       return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
@@ -50,13 +64,10 @@ const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
           <DropdownInput
             id={field.id}
             titleText={<FieldLabel field={field} />}
-            label={t('chooseAnOption', 'Choose an option')}
-            items={field.questionOptions.answers
-              .filter((answer) => !answer.isHidden)
-              .map((item) => item.value || item.concept)}
+            items={items}
             itemToString={itemToString}
-            selectedItem={value}
-            onChange={({ selectedItem }) => handleChange(selectedItem)}
+            selectedItem={isEmpty(value) ? NullSelectOption : value}
+            onChange={handleChange}
             disabled={field.isDisabled}
             readOnly={field.readonly}
             invalid={errors.length > 0}

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

@@ -117,4 +117,41 @@ describe.skip('dropdown input field', () => {
       });
     });
   });
-});
+
+  it('should clear selection when empty option is selected', async () => {
+    // setup
+    question.meta.previousValue = {
+      uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+      person: '833db896-c1f0-11eb-8529-0242ac130003',
+      obsDatetime: encounterContext.encounterDate,
+      concept: '1c43b05b-b6d8-4eb5-8f37-0b14f5347568',
+      location: { uuid: '41e6e516-c1f0-11eb-8529-0242ac130003' },
+      order: null,
+      groupMembers: [],
+      voided: false,
+      value: '6ddd933a-e65c-4f35-8884-c555b50c55e1',
+    };
+    await renderForm({ 'patient-past-program': question.meta.previousValue.value });
+    const dropdownWidget = screen.getByRole('combobox', { name: /Patient past program./ });
+
+    // select an option first
+    fireEvent.click(dropdownWidget);
+    const oncologyScreeningOption = screen.getByText('Oncology Screening and Diagnosis Program');
+    fireEvent.click(oncologyScreeningOption);
+
+    // clear the selection
+    fireEvent.click(dropdownWidget);
+    const clearOption = screen.getByText('Select an option');
+    fireEvent.click(clearOption);
+
+    // verify
+    await act(async () => {
+      expect(question.meta.submission.newValue).toEqual({
+        uuid: '305ed1fc-c1fd-11eb-8529-0242ac130003',
+        value: null,
+        formFieldNamespace: 'rfe-forms',
+        formFieldPath: 'rfe-forms-patient-past-program',
+      });
+    });
+  });
+});

package/src/constants.ts

@@ -10,3 +10,4 @@ export const encounterRepresentation =
 export const FormsStore = 'forms-engine-store';
 export const PatientChartWorkspaceHeaderSlot = 'patient-chart-workspace-header-slot';
 export const codedTypes = ['radio', 'checkbox', 'select', 'content-switcher'];
+export const NullSelectOption = 'OPTION_NULL';

package/src/hooks/useInitialValues.test.ts

@@ -0,0 +1,76 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+import useInitialValues from './useInitialValues';
+import { type FormField } from '../types';
+
+export const mockFormFields: FormField[] = [
+  {
+    label: 'First Name',
+    type: 'text',
+    id: 'firstName',
+    questionOptions: {
+      rendering: 'text',
+    },
+    value: '',
+    isRequired: true,
+    validators: [{ required: true }],
+  },
+  {
+    label: 'Date of Birth',
+    type: 'date',
+    questionOptions: {
+      rendering: 'date',
+    },
+    datePickerFormat: 'both',
+    id: 'dob',
+    value: null,
+    isRequired: true,
+    validators: [{ required: true }],
+  },
+];
+
+describe('useInitialValues', () => {
+  let formProcessor;
+  let context;
+
+  beforeEach(() => {
+    formProcessor = {
+      getInitialValues: jest.fn(),
+    };
+    context = {
+      formFields: mockFormFields,
+      formFieldAdapters: { adapter1: {}, adapter2: {} },
+    };
+  });
+
+  it('should not call getInitialValues if context dependencies are not loaded', () => {
+    const { result } = renderHook(() => useInitialValues(formProcessor, true, context));
+
+    expect(result.current.isLoadingInitialValues).toBe(true);
+    expect(formProcessor.getInitialValues).not.toHaveBeenCalled();
+  });
+
+  it('should set error if getInitialValues rejects', async () => {
+    const mockError = new Error('Failed to fetch initial values');
+    formProcessor.getInitialValues.mockRejectedValue(mockError);
+
+    const { result } = await act(() => renderHook(() => useInitialValues(formProcessor, false, context)));
+
+    expect(result.current.error).toEqual(mockError);
+    expect(result.current.isLoadingInitialValues).toBe(false);
+  });
+
+  it('should set initial values when dependencies are loaded', async () => {
+    const mockInitialValues = { firstName: 'John Doe', dob: '1992-10-10' };
+    formProcessor.getInitialValues.mockResolvedValue(mockInitialValues);
+
+    const { result } = renderHook(() => useInitialValues(formProcessor, false, context));
+
+    await waitFor(() => expect(result.current.isLoadingInitialValues).toBe(true));
+
+    expect(formProcessor.getInitialValues).toHaveBeenCalledWith(context);
+    expect(result.current.initialValues).toEqual(mockInitialValues);
+    expect(result.current.isLoadingInitialValues).toBe(false);
+    expect(result.current.error).toBe(null);
+  });
+});

package/src/hooks/useInitialValues.ts

@@ -28,6 +28,7 @@ const useInitialValues = (
         .catch((error) => {
           console.error(error);
           setError(error);
+          setIsLoadingInitialValues(false);
         });
     }
   }, [formProcessor, isLoadingContextDependencies, context]);