@openmrs/esm-form-engine-lib 2.1.0-pre.1466 → 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.1466",
+  "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/adapters/program-state-adapter.test.ts

@@ -0,0 +1,415 @@
+import { type FormContextProps } from '../provider/form-provider';
+import { type FormField } from '../types';
+import { ProgramStateAdapter } from './program-state-adapter';
+
+const formContext = {
+  methods: null,
+  workspaceLayout: 'maximized',
+  isSubmitting: false,
+  patient: {
+    id: '833db896-c1f0-11eb-8529-0242ac130003',
+  },
+  formJson: null,
+  visit: null,
+  sessionMode: 'enter',
+  sessionDate: new Date(),
+  location: {
+    uuid: '41e6e516-c1f0-11eb-8529-0242ac130003',
+  },
+  currentProvider: null,
+  layoutType: 'small-desktop',
+  domainObjectValue: {
+    uuid: '873455da-3ec4-453c-b565-7c1fe35426be',
+    obs: [],
+  },
+  previousDomainObjectValue: null,
+  processor: null,
+  formFields: [],
+  formFieldAdapters: null,
+  formFieldValidators: null,
+  customDependencies: {
+    patientPrograms: [],
+  },
+  getFormField: jest.fn(),
+  addFormField: jest.fn(),
+  updateFormField: jest.fn(),
+  removeFormField: () => {},
+  addInvalidField: jest.fn(),
+  removeInvalidField: jest.fn(),
+  setInvalidFields: jest.fn(),
+  setForm: jest.fn(),
+} as FormContextProps;
+
+const field = {
+  label: 'HIV Enrollment Initial State',
+  type: 'programState',
+  required: false,
+  id: 'hivEnrollmentInitialState',
+  questionOptions: {
+    rendering: 'select',
+    answers: [
+      {
+        value: '7293cb90-c93f-4386-b32f-e8cfc633dc3e',
+        label: 'Example Option 1',
+      },
+      {
+        value: 'c26a8cc7-fb07-4b2f-bdb0-730db9ce0020',
+        label: 'Example Option 2',
+      },
+      {
+        value: '29a513f0-2810-4356-98f5-42b12f7013a5',
+        label: 'Example Option 3',
+      },
+      {
+        value: '7c0a5653-313f-4564-b9cf-d59adf1173dc',
+        label: 'On Antiretrovirals Treatment',
+      },
+    ],
+    programUuid: '64f950e6-1b07-4ac0-8e7e-f3e148f3463f',
+    workflowUuid: '70921392-4e3e-5465-978d-45b68b7def5f',
+  },
+  meta: {
+    submission: {},
+  },
+} as FormField;
+
+const patientPrograms = [
+  {
+    uuid: 'c0dd89a7-62d5-40ed-850a-d3b1709ea7f2',
+    display: 'HIV Care and Treatment',
+    program: {
+      uuid: '64f950e6-1b07-4ac0-8e7e-f3e148f3463f',
+      name: 'HIV Care and Treatment',
+      allWorkflows: [
+        {
+          uuid: '70921392-4e3e-5465-978d-45b68b7def5f',
+          concept: {
+            uuid: '7dc379f6-1725-11ed-861d-0242ac120002',
+            display: 'HIV treatment status',
+            links: [
+              {
+                rel: 'self',
+                uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/7dc379f6-1725-11ed-861d-0242ac120002',
+                resourceAlias: 'concept',
+              },
+            ],
+          },
+          description: null,
+          retired: false,
+          states: [
+            {
+              uuid: '7293cb90-c93f-4386-b32f-e8cfc633dc3e',
+              description: null,
+              retired: false,
+              concept: {
+                uuid: 'acc6f157-c9a5-4690-b814-e653cbf80b4c',
+                display: 'Example Option 1',
+                name: {
+                  display: 'Example Option 1',
+                  uuid: '51d0d6c4-0361-479e-aec4-b40ee82fb23c',
+                  name: 'Example Option 1',
+                  locale: 'en',
+                  localePreferred: true,
+                  conceptNameType: 'FULLY_SPECIFIED',
+                  links: [],
+                  resourceVersion: '1.9',
+                },
+                datatype: {
+                  uuid: '8d4a4c94-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'N/A',
+                  links: [],
+                },
+                conceptClass: {
+                  uuid: '8d492774-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'Misc',
+                  links: [],
+                },
+                set: false,
+                version: null,
+                retired: false,
+                names: [
+                  {
+                    uuid: '51d0d6c4-0361-479e-aec4-b40ee82fb23c',
+                    display: 'Example Option 1',
+                    links: [],
+                  },
+                ],
+                descriptions: [],
+                mappings: [],
+                answers: [],
+                setMembers: [],
+                attributes: [],
+                links: [],
+                resourceVersion: '2.0',
+              },
+              links: [
+                {
+                  rel: 'self',
+                  uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/workflow/70921392-4e3e-5465-978d-45b68b7def5f/state/7293cb90-c93f-4386-b32f-e8cfc633dc3e',
+                  resourceAlias: 'state',
+                },
+                {
+                  rel: 'full',
+                  uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/workflow/70921392-4e3e-5465-978d-45b68b7def5f/state/7293cb90-c93f-4386-b32f-e8cfc633dc3e?v=full',
+                  resourceAlias: 'state',
+                },
+              ],
+              resourceVersion: '1.8',
+            },
+            {
+              uuid: 'c26a8cc7-fb07-4b2f-bdb0-730db9ce0020',
+              description: null,
+              retired: false,
+              concept: {
+                uuid: '4f2f8cd9-e57c-4bcd-822f-0dfabb684bc1',
+                display: 'Example Option 2',
+                name: {
+                  display: 'Example Option 2',
+                  uuid: 'd0934337-68bd-47ff-83f7-075c8d15f31c',
+                  name: 'Example Option 2',
+                  locale: 'en',
+                  localePreferred: true,
+                  conceptNameType: 'FULLY_SPECIFIED',
+                  links: [],
+                  resourceVersion: '1.9',
+                },
+                datatype: {
+                  uuid: '8d4a4c94-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'N/A',
+                  links: [],
+                },
+                conceptClass: {
+                  uuid: '8d492774-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'Misc',
+                  links: [],
+                },
+                set: false,
+                version: null,
+                retired: false,
+                names: [
+                  {
+                    uuid: 'd0934337-68bd-47ff-83f7-075c8d15f31c',
+                    display: 'Example Option 2',
+                    links: [],
+                  },
+                ],
+                descriptions: [],
+                mappings: [],
+                answers: [],
+                setMembers: [],
+                attributes: [],
+                links: [],
+                resourceVersion: '2.0',
+              },
+              links: [],
+              resourceVersion: '1.8',
+            },
+            {
+              uuid: '7c0a5653-313f-4564-b9cf-d59adf1173dc',
+              description: null,
+              retired: false,
+              concept: {
+                uuid: '7dc37bb8-1725-11ed-861d-0242ac120002',
+                display: 'On Antiretrovirals Treatment',
+                name: {
+                  display: 'On Antiretrovirals Treatment',
+                  uuid: 'c90ed5f3-4c4d-303b-b8bd-d6b5d21c0f81',
+                  name: 'On Antiretrovirals Treatment',
+                  locale: 'en',
+                  localePreferred: true,
+                  conceptNameType: 'FULLY_SPECIFIED',
+                  links: [],
+                  resourceVersion: '1.9',
+                },
+                datatype: {
+                  uuid: '8d4a4c94-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'N/A',
+                  links: [],
+                },
+                conceptClass: {
+                  uuid: '8d492774-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'Misc',
+                  links: [],
+                },
+                set: false,
+                version: null,
+                retired: false,
+                names: [
+                  {
+                    uuid: 'c90ed5f3-4c4d-303b-b8bd-d6b5d21c0f81',
+                    display: 'On Antiretrovirals Treatment',
+                    links: [],
+                  },
+                  {
+                    uuid: '3d61609a-30e1-3dd1-83a0-21310b06c388',
+                    display: 'On Antiretrovirals',
+                    links: [],
+                  },
+                ],
+                descriptions: [
+                  {
+                    uuid: '07fc6455-9ffa-4848-a4bc-e58ffb91503a',
+                    display: 'On Antiretrovirals Treatment program workflow state',
+                    links: [],
+                  },
+                ],
+                mappings: [
+                  {
+                    uuid: 'fffc1802-f832-49ef-bfaa-0ffe4bc7db0f',
+                    display: 'SNOMED MVP: OATT',
+                    links: [],
+                  },
+                ],
+                answers: [],
+                setMembers: [],
+                attributes: [],
+                links: [],
+                resourceVersion: '2.0',
+              },
+              links: [],
+              resourceVersion: '1.8',
+            },
+            {
+              uuid: '29a513f0-2810-4356-98f5-42b12f7013a5',
+              description: null,
+              retired: false,
+              concept: {
+                uuid: 'e1ad9977-c106-4116-9f23-45258b7e306b',
+                display: 'Example Option 3',
+                name: {
+                  display: 'Example Option 3',
+                  uuid: '988af00b-6243-4fc2-9d81-718bc9bbe743',
+                  name: 'Example Option 3',
+                  locale: 'en',
+                  localePreferred: true,
+                  conceptNameType: 'FULLY_SPECIFIED',
+                  links: [],
+                  resourceVersion: '1.9',
+                },
+                datatype: {
+                  uuid: '8d4a4c94-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'N/A',
+                  links: [],
+                },
+                conceptClass: {
+                  uuid: '8d492774-c2cc-11de-8d13-0010c6dffd0f',
+                  display: 'Misc',
+                  links: [],
+                },
+                set: false,
+                version: null,
+                retired: false,
+                names: [
+                  {
+                    uuid: '988af00b-6243-4fc2-9d81-718bc9bbe743',
+                    display: 'Example Option 3',
+                    links: [
+                      {
+                        rel: 'self',
+                        uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/e1ad9977-c106-4116-9f23-45258b7e306b/name/988af00b-6243-4fc2-9d81-718bc9bbe743',
+                        resourceAlias: 'name',
+                      },
+                    ],
+                  },
+                ],
+                descriptions: [],
+                mappings: [],
+                answers: [],
+                setMembers: [],
+                attributes: [],
+                links: [],
+                resourceVersion: '2.0',
+              },
+              links: [],
+              resourceVersion: '1.8',
+            },
+          ],
+          links: [],
+          resourceVersion: '1.8',
+        },
+      ],
+    },
+    dateEnrolled: '2024-09-23T09:31:51.000+0000',
+    dateCompleted: null,
+    location: null,
+    states: [
+      {
+        startDate: '2024-09-23T00:00:00.000+0000',
+        endDate: null,
+        state: {
+          uuid: '7293cb90-c93f-4386-b32f-e8cfc633dc3e',
+          name: null,
+          retired: false,
+          concept: {
+            uuid: 'acc6f157-c9a5-4690-b814-e653cbf80b4c',
+          },
+          programWorkflow: {
+            uuid: '70921392-4e3e-5465-978d-45b68b7def5f',
+          },
+        },
+      },
+    ],
+  },
+];
+
+describe('ProgramStateAdapter', () => {
+  // new submission (enter mode)
+  it('should handle submission for a program state', () => {
+    const value = '7293cb90-c93f-4386-b32f-e8cfc633dc3e';
+    ProgramStateAdapter.transformFieldValue(field, value, formContext);
+    expect(field.meta.submission.newValue).toEqual({
+      state: value,
+      startDate: expect.any(String),
+    });
+  });
+
+  it('should return null if the new value is the same as the previous value', () => {
+    field.meta.previousValue = { uuid: '7293cb90-c93f-4386-b32f-e8cfc633dc3e' };
+    const value = '7293cb90-c93f-4386-b32f-e8cfc633dc3e';
+    const result = ProgramStateAdapter.transformFieldValue(field, value, formContext);
+    expect(result).toBeNull();
+    expect(field.meta.submission.newValue).toBeNull();
+  });
+
+  it('should return null if the new value is empty or null', () => {
+    const value = null;
+    const result = ProgramStateAdapter.transformFieldValue(field, value, formContext);
+    expect(result).toBeNull();
+    expect(field.meta.submission.newValue).toBeNull();
+  });
+
+  it('should get initial value for the program state', async () => {
+    formContext.customDependencies.patientPrograms.push(...patientPrograms);
+    const program = await ProgramStateAdapter.getInitialValue(field, null, formContext);
+    expect(program).toEqual('7293cb90-c93f-4386-b32f-e8cfc633dc3e');
+  });
+
+  it('should return null if no active state is found for the patient program', async () => {
+    formContext.customDependencies.patientPrograms = [
+      {
+        ...patientPrograms[0],
+        states: [],
+      },
+    ];
+    const p = await ProgramStateAdapter.getInitialValue(field, null, formContext);
+    expect(p).toBeNull();
+  });
+
+  it('should return null if no patient program matches the programUuid', async () => {
+    const fieldWithDifferentProgramUuid = {
+      ...field,
+      questionOptions: { ...field.questionOptions, programUuid: 'non-existing-uuid' },
+    };
+    const program = await ProgramStateAdapter.getInitialValue(fieldWithDifferentProgramUuid, null, formContext);
+    expect(program).toBeNull();
+  });
+
+  it('should return null for getPreviousValue', async () => {
+    const previousValue = await ProgramStateAdapter.getPreviousValue(field, null, formContext);
+    expect(previousValue).toBeNull();
+  });
+
+  it('should execute tearDown without issues', () => {
+    expect(() => ProgramStateAdapter.tearDown()).not.toThrow();
+  });
+});

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,
 };