@openmrs/esm-form-engine-lib 2.1.0-pre.1398 → 2.1.0-pre.1402

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "2.1.0-pre.1398",
+  "version": "2.1.0-pre.1402",
   "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/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/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';