From e8c67c44e8781349972cd869ef29e59ae4575558 Mon Sep 17 00:00:00 2001
From: Pius Rubangakene <piruville@gmail.com>
Date: Thu, 27 Jun 2024 03:21:42 -0700
Subject: [PATCH] (feat) O3-3481 Adds option to display multicheckbox inline
 (#331)

---
 .../multi-select/multi-select.component.tsx   | 38 +++++++++----------
 src/types.ts                                  |  1 +
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/inputs/multi-select/multi-select.component.tsx b/src/components/inputs/multi-select/multi-select.component.tsx
index 571e94c52..791ff5c19 100644
--- 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
index 773ed79fc..0b82de565 100644
--- 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;
 }