@openmrs/esm-form-engine-lib 2.1.0-pre.1475 → 2.1.0-pre.1476

package/__mocks__/forms/rfe-forms/multi-select-form.json

@@ -71,6 +71,26 @@
               },
               "inlineRendering": null,
               "isHidden": false
+            },
+            {
+              "label": "Checkbox searchable",
+              "id": "checkboxSearchable",
+              "questionOptions": {
+                "rendering": "multiCheckbox",
+                "concept": "d49e3e6-55df-5096-93ca-59edadb74b3f",
+                "answers": [
+                  {
+                    "concept": "8b715fed-97f6-4e38-8f6a-c167a42f8923",
+                    "label": "Option 1"
+                  },
+                  {
+                    "concept": "a899e0ac-1350-11df-a1f1-0026b9348838",
+                    "label": "Option 2"
+                  }
+                ]
+              },
+              "type": "obs",
+              "validators": []
             }
           ]
         }

package/package.json

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

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

@@ -42,6 +42,11 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
     setFieldValue(value);
   };
 
+  const isSearchable = useMemo(
+    () => isTrue(field.questionOptions.isCheckboxSearchable),
+    [field.questionOptions.isCheckboxSearchable],
+  );
+
   useEffect(() => {
     if (isFirstRender.current && counter === 1) {
       setInitiallyCheckedQuestionItems(initiallySelectedQuestionItems.map((item) => item.concept));
@@ -89,7 +94,25 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
       <>
         <div className={styles.boldedLabel}>
           <Layer>
-            {field.inlineMultiCheckbox ? (
+            {isSearchable ? (
+              <FilterableMultiSelect
+                placeholder={t('search', 'Search') + '...'}
+                onChange={handleSelectItemsChange}
+                id={t(field.label)}
+                items={selectOptions}
+                initialSelectedItems={initiallySelectedQuestionItems}
+                label={''}
+                titleText={label}
+                key={counter}
+                itemToString={(item) => (item ? item.label : ' ')}
+                disabled={field.isDisabled}
+                invalid={errors.length > 0}
+                invalidText={errors[0]?.message}
+                warn={warnings.length > 0}
+                warnText={warnings[0]?.message}
+                readOnly={field.readonly}
+              />
+            ) : (
               <CheckboxGroup legendText={label} name={field.id}>
                 {field.questionOptions.answers?.map((value, index) => {
                   return (
@@ -105,32 +128,15 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                       defaultChecked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
                       checked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
                       onBlur={onblur}
+                      disabled={value.disable?.isDisabled}
                     />
                   );
                 })}
               </CheckboxGroup>
-            ) : (
-              <FilterableMultiSelect
-                placeholder={t('search', 'Search') + '...'}
-                onChange={handleSelectItemsChange}
-                id={t(field.label)}
-                items={selectOptions}
-                initialSelectedItems={initiallySelectedQuestionItems}
-                label={''}
-                titleText={<FieldLabel field={field} />}
-                key={counter}
-                itemToString={(item) => (item ? item.label : ' ')}
-                disabled={field.isDisabled}
-                invalid={errors.length > 0}
-                invalidText={errors[0]?.message}
-                warn={warnings.length > 0}
-                warnText={warnings[0]?.message}
-                readOnly={field.readonly}
-              />
             )}
           </Layer>
         </div>
-        {!field.inlineMultiCheckbox && (
+        {isSearchable && (
           <div className={styles.selectionDisplay}>
             {value?.length ? (
               <div className={styles.tagContainer}>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event'; // Correct import for userEvent
+import userEvent from '@testing-library/user-event';
 import { type FetchResponse, openmrsFetch, usePatient, useSession } from '@openmrs/esm-framework';
 import { type FormSchema } from '../../../types';
 import { mockPatient } from '__mocks__/patient.mock';
@@ -66,13 +66,24 @@ describe('MultiSelect Component', () => {
     expect(screen.getByText('Was this visit scheduled?')).toBeInTheDocument();
   });
 
+  it('should render a checkbox searchable (combobox) for the "multiCheckbox" rendering type', async () => {
+    await renderForm();
+    const user = userEvent.setup();
+
+    const searchableCombobox = screen.getByRole('combobox', { name: /Checkbox searchable/i });
+    expect(searchableCombobox).toBeInTheDocument();
+    await user.click(searchableCombobox);
+
+    expect(screen.getByRole('option', { name: /Option 1/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Option 2/i })).toBeInTheDocument();
+  });
+
   it('should disable checkbox option if the field value depends on evaluates the expression to true', async () => {
     const user = userEvent.setup();
     await renderForm();
     await user.click(screen.getByRole('combobox', { name: /Patient covered by NHIF/i }));
     await user.click(screen.getByRole('option', { name: /no/i }));
-    await user.click(screen.getByText('Was this visit scheduled?'));
-    const unscheduledVisitOption = screen.getByRole('option', { name: /Unscheduled visit early/i });
+    const unscheduledVisitOption = screen.getByRole('checkbox', { name: /Unscheduled visit early/i });
     expect(unscheduledVisitOption).toHaveAttribute('disabled');
   });
 
@@ -81,8 +92,7 @@ describe('MultiSelect Component', () => {
     await renderForm();
     await user.click(screen.getByRole('combobox', { name: /patient covered by nhif/i }));
     await user.click(screen.getByRole('option', { name: /yes/i }));
-    await user.click(screen.getByText('Was this visit scheduled?'));
-    const unscheduledVisitOption = screen.getByRole('option', { name: /Unscheduled visit early/i });
+    const unscheduledVisitOption = screen.getByRole('checkbox', { name: /Unscheduled visit early/i });
     expect(unscheduledVisitOption).not.toBeDisabled();
   });
 });

package/src/form-engine.test.tsx

@@ -12,7 +12,7 @@ import {
 } from '@openmrs/esm-framework';
 import { when } from 'jest-when';
 import * as api from './api';
-import { assertFormHasAllFields, findMultiSelectInput, findSelectInput } from './utils/test-utils';
+import { assertFormHasAllFields, findCheckboxGroup, findSelectInput } from './utils/test-utils';
 import { evaluatePostSubmissionExpression } from './utils/post-submission-action-helper';
 import { mockPatient } from '__mocks__/patient.mock';
 import { mockSessionDataResponse } from '__mocks__/session.mock';
@@ -155,18 +155,18 @@ describe('Form engine component', () => {
     await assertFormHasAllFields(screen, [
       { fieldName: 'When was the HIV test conducted? *', fieldType: 'date' },
       { fieldName: 'Community service delivery point', fieldType: 'select' },
-      { fieldName: 'TB screening', fieldType: 'combobox' },
+      { fieldName: 'TB screening', fieldType: 'checkbox' },
     ]);
   });
 
-  it('should demonstrate behaviour driven by form intents', async () => {
+  it('should demonstrate behavior driven by form intents', async () => {
     await act(async () => {
       renderForm('955ab92f-f93e-4dc0-9c68-b7b2346def55', null, 'HTS_INTENT_A');
     });
 
     await assertFormHasAllFields(screen, [
       { fieldName: 'When was the HIV test conducted? *', fieldType: 'date' },
-      { fieldName: 'TB screening', fieldType: 'combobox' },
+      { fieldName: 'TB screening', fieldType: 'checkbox' },
     ]);
 
     try {
@@ -188,14 +188,14 @@ describe('Form engine component', () => {
 
     await assertFormHasAllFields(screen, [
       { fieldName: 'When was the HIV test conducted? *', fieldType: 'date' },
-      { fieldName: 'Community service delivery point', fieldType: 'combobox' },
+      { fieldName: 'Community service delivery point *', fieldType: 'select' },
     ]);
 
     try {
-      await findMultiSelectInput(screen, 'TB screening');
+      await findCheckboxGroup(screen, 'TB screening');
       fail("Field with title 'TB screening' should not be found");
     } catch (err) {
-      expect(err.message.includes('Unable to find role="combobox" and name `/TB screening/i`')).toBeTruthy();
+      expect(err.message.includes('Unable to find role="group" and name `/TB screening/i`')).toBeTruthy();
     }
   });
 
@@ -262,19 +262,18 @@ describe('Form engine component', () => {
 
   describe('historical expressions', () => {
     it('should ascertain getPreviousEncounter() returns an encounter and the historical expression displays on the UI', async () => {
-      const user = userEvent.setup();
-
       renderForm(null, historicalExpressionsForm, 'COVID Assessment');
 
       //ascertain form has rendered
-      await screen.findByRole('combobox', { name: /Reasons for assessment/i });
+      const checkboxGroup = await findCheckboxGroup(screen, 'Reasons for assessment');
+      expect(checkboxGroup).toBeInTheDocument();
 
       //ascertain function fetching the encounter has been called
       expect(api.getPreviousEncounter).toHaveBeenCalled();
       expect(api.getPreviousEncounter).toHaveReturnedWith(Promise.resolve(mockHxpEncounter));
 
       expect(screen.getByRole('button', { name: /reuse value/i })).toBeInTheDocument;
-      expect(screen.getByText(/Entry into a country/i));
+      expect(screen.getByText(/Entry into a country/i, { selector: 'div.value' }));
     });
   });
 
@@ -328,14 +327,14 @@ describe('Form engine component', () => {
       await user.click(screen.getByRole('button', { name: /save/i }));
 
       await assertFormHasAllFields(screen, [
-        { fieldName: 'Was this visit scheduled?', fieldType: 'combobox' },
+        { fieldName: 'Was this visit scheduled?', fieldType: 'select' },
         { fieldName: 'If Unscheduled, actual text scheduled date *', fieldType: 'text' },
         { fieldName: 'If Unscheduled, actual scheduled date *', fieldType: 'date' },
         { fieldName: 'If Unscheduled, actual number scheduled date *', fieldType: 'number' },
         { fieldName: 'If Unscheduled, actual text area scheduled date *', fieldType: 'textarea' },
         { fieldName: 'Not required actual text area scheduled date', fieldType: 'textarea' },
         { fieldName: 'If Unscheduled, actual scheduled reason select *', fieldType: 'select' },
-        { fieldName: 'If Unscheduled, actual scheduled reason multi-select *', fieldType: 'combobox' },
+        { fieldName: 'If Unscheduled, actual scheduled reason multi-select *', fieldType: 'checkbox-searchable' },
         { fieldName: 'If Unscheduled, actual scheduled reason radio *', fieldType: 'radio' },
       ]);
 
@@ -544,7 +543,7 @@ describe('Form engine component', () => {
       await act(async () => {
         renderForm(null, conditionalRequiredTestForm);
       });
-      await assertFormHasAllFields(screen, [{ fieldName: 'Was this visit scheduled?', fieldType: 'combobox' }]);
+      await assertFormHasAllFields(screen, [{ fieldName: 'Was this visit scheduled?', fieldType: 'select' }]);
       await user.click(screen.getByRole('button', { name: /save/i }));
       expect(saveEncounterMock).toHaveBeenCalled();
       expect(saveEncounterMock).toHaveBeenCalledWith(expect.any(AbortController), expect.any(Object), undefined);

package/src/transformers/default-schema-transformer.test.ts

@@ -1,3 +1,4 @@
+import { type FormSchema } from '../types';
 import { DefaultFormSchemaTransformer } from './default-schema-transformer';
 import testForm from '__mocks__/forms/afe-forms/test-schema-transformer-form.json';
 
@@ -20,6 +21,7 @@ const expectedTransformedSchema = {
               id: 'dem_multi_checkbox',
               questionOptions: {
                 rendering: 'checkbox',
+                isCheckboxSearchable: true,
               },
               validators: [
                 {
@@ -152,4 +154,58 @@ describe('Default form schema transformer', () => {
   it('should transform AFE schema to be compatible with RFE', () => {
     expect(DefaultFormSchemaTransformer.transform(testForm as any)).toEqual(expectedTransformedSchema);
   });
+
+  it('should handle checkbox-searchable rendering', () => {
+    // setup
+    const form = {
+      pages: [
+        {
+          sections: [
+            {
+              questions: [
+                {
+                  label: 'Searchable Checkbox',
+                  type: 'obs',
+                  questionOptions: {
+                    rendering: 'checkbox-searchable',
+                  },
+                  id: 'searchableCheckbox',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+    // exercise
+    const transformedForm = DefaultFormSchemaTransformer.transform(form as FormSchema);
+    const transformedQuestion = transformedForm.pages[0].sections[0].questions[0];
+    // verify
+    expect(transformedQuestion.questionOptions.rendering).toEqual('checkbox');
+    expect(transformedQuestion.questionOptions.isCheckboxSearchable).toEqual(true);
+  });
+
+  it('should handle multiCheckbox rendering', () => {
+    // setup
+    const form = {
+      pages: [
+        {
+          sections: [
+            {
+              questions: [
+                {
+                  label: 'Multi Checkbox',
+                  type: 'obs',
+                  questionOptions: {
+                    rendering: 'multiCheckbox',
+                  },
+                  id: 'multiCheckboxField',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  });
 });

package/src/transformers/default-schema-transformer.ts

@@ -1,7 +1,9 @@
-import { type FormField, type FormSchemaTransformer, type FormSchema } from '../types';
+import { type FormField, type FormSchemaTransformer, type FormSchema, type RenderType } from '../types';
 import { isTrue } from '../utils/boolean-utils';
 import { hasRendering } from '../utils/common-utils';
 
+export type RenderTypeExtended = 'multiCheckbox' | 'numeric' | RenderType;
+
 export const DefaultFormSchemaTransformer: FormSchemaTransformer = {
   transform: (form: FormSchema) => {
     parseBooleanTokenIfPresent(form, 'readonly');
@@ -135,9 +137,10 @@ function transformByType(question: FormField) {
 }
 
 function transformByRendering(question: FormField) {
-  switch (question.questionOptions.rendering as any) {
+  switch (question.questionOptions.rendering as RenderTypeExtended) {
+    case 'checkbox-searchable':
     case 'multiCheckbox':
-      question.questionOptions.rendering = 'checkbox';
+      handleCheckbox(question);
       break;
     case 'numeric':
       question.questionOptions.rendering = 'number';
@@ -165,6 +168,20 @@ function transformByRendering(question: FormField) {
   return question;
 }
 
+function handleCheckbox(question: FormField) {
+  if ((question.questionOptions.rendering as RenderTypeExtended) === 'multiCheckbox') {
+    question.questionOptions.rendering = 'checkbox-searchable';
+    if (isTrue(question.inlineMultiCheckbox)) {
+      question.questionOptions.rendering = 'checkbox';
+    }
+  }
+
+  if (hasRendering(question, 'checkbox-searchable')) {
+    question.questionOptions.rendering = 'checkbox';
+    question.questionOptions.isCheckboxSearchable = true;
+  }
+}
+
 function handleLabOrders(question: FormField) {
   if (hasRendering(question, 'group') && question.questions?.length) {
     question.questions.forEach(handleLabOrders);

package/src/types/schema.ts

@@ -83,6 +83,7 @@ export interface FormField {
   questionInfo?: string;
   historicalExpression?: string;
   constrainMaxWidth?: boolean;
+  /** @deprecated */
   inlineMultiCheckbox?: boolean;
   meta?: QuestionMetaProps;
 }
@@ -161,7 +162,14 @@ export interface FormQuestionOptions {
   allowedFileTypes?: Array<string>;
   allowMultiple?: boolean;
   datasource?: { name: string; config?: Record<string, any> };
+  /**
+   * Determines if the ui-select-extended rendering is searchable
+   */
   isSearchable?: boolean;
+  /**
+   * Determines if the checkbox rendering is searchable
+   */
+  isCheckboxSearchable?: boolean;
   workspaceName?: string;
   buttonLabel?: string;
   identifierType?: string;
@@ -183,8 +191,10 @@ export interface QuestionAnswerOption {
   concept?: string;
   [key: string]: any;
 }
+
 export type RenderType =
   | 'checkbox'
+  | 'checkbox-searchable'
   | 'content-switcher'
   | 'date'
   | 'datetime'

package/src/utils/test-utils.ts

@@ -14,7 +14,11 @@ export async function findRadioGroupMember(screen, name: string): Promise<HTMLIn
   return await screen.findByRole('radio', { name });
 }
 
-export async function findMultiSelectInput(screen, nameSubstring: string): Promise<HTMLInputElement> {
+export async function findCheckboxGroup(screen, name: string): Promise<HTMLInputElement> {
+  return await screen.findByRole('group', { name: new RegExp(name, 'i') });
+}
+
+export async function findCheckboxSearchable(screen, nameSubstring: string): Promise<HTMLInputElement> {
   return await screen.findByRole('combobox', { name: new RegExp(nameSubstring, 'i') });
 }
 
@@ -42,7 +46,8 @@ const fieldTypeToGetterMap = {
   'radio-group': findRadioGroupInput,
   'radio-item': findRadioGroupMember,
   textarea: findTextOrDateInput,
-  combobox: findMultiSelectInput,
+  checkbox: findCheckboxGroup,
+  'checkbox-searchable': findCheckboxSearchable,
   select: findSelectInput,
 };