(feat) O3-3481 Adds option to display multicheckbox inline

openmrs · Jun 26, 2024 · f5f59c8 · f5f59c8
1 parent c7620fe
commit f5f59c8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/src/components/inputs/multi-select/multi-select.component.tsx b/src/components/inputs/multi-select/multi-select.component.tsx
@@ -108,25 +108,7 @@ const MultiSelect: React.FC<FormFieldProps> = ({ question, onChange, handler, pr
       <>
         <div className={styles.boldedLabel}>
           <Layer>
-            {question.questionOptions.answers?.length > 5 ? (
-              <FilterableMultiSelect
-                placeholder={t('search', 'Search') + '...'}
-                onChange={handleSelectItemsChange}
-                id={t(question.label)}
-                items={selectOptions}
-                initialSelectedItems={initiallySelectedQuestionItems}
-                label={''}
-                titleText={label}
-                key={counter}
-                itemToString={(item) => (item ? item.label : ' ')}
-                disabled={question.isDisabled}
-                invalid={errors.length > 0}
-                invalidText={errors[0]?.message}
-                warn={warnings.length > 0}
-                warnText={warnings[0]?.message}
-                readOnly={question.readonly}
-              />
-            ) : (
+            {question.inlineMultiCheckbox ? (
               <CheckboxGroup legendText={label} name={question.id}>
                 {question.questionOptions.answers?.map((value, index) => {
                   return (
@@ -146,6 +128,24 @@ const MultiSelect: React.FC<FormFieldProps> = ({ question, onChange, handler, pr
                   );
                 })}
               </CheckboxGroup>
+            ) : (
+              <FilterableMultiSelect
+                placeholder={t('search', 'Search') + '...'}
+                onChange={handleSelectItemsChange}
+                id={t(question.label)}
+                items={selectOptions}
+                initialSelectedItems={initiallySelectedQuestionItems}
+                label={''}
+                titleText={label}
+                key={counter}
+                itemToString={(item) => (item ? item.label : ' ')}
+                disabled={question.isDisabled}
+                invalid={errors.length > 0}
+                invalidText={errors[0]?.message}
+                warn={warnings.length > 0}
+                warnText={warnings[0]?.message}
+                readOnly={question.readonly}
+              />
             )}
           </Layer>
         </div>

diff --git a/src/types.ts b/src/types.ts
@@ -134,6 +134,7 @@ export interface FormField {
   questionInfo?: string;
   historicalExpression?: string;
   constrainMaxWidth?: boolean;
+  inlineMultiCheckbox?: boolean;
   meta?: QuestionMetaProps;
 }