fix select and question component to accept string

awell-health · Jan 25, 2024 · f0bab7d · f0bab7d
1 parent fb57207
commit f0bab7d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/atoms/select/Select.tsx b/src/atoms/select/Select.tsx
@@ -27,7 +27,7 @@ export interface SelectProps
   /**
    * change event handler
    */
-  onChange: (value: number | Array<Option>) => void
+  onChange: (value: number | string | Array<Option>) => void
   /**
    * click event handler
    */
@@ -206,11 +206,9 @@ export const Select = ({
         if (isSelected) {
           updatedSelected = selected
             .filter((item) => item.value !== option.value)
-            .sort((a, b) => a.value - b.value)
+            .sort()
         } else {
-          updatedSelected = [...selected, option].sort(
-            (a, b) => a.value - b.value
-          )
+          updatedSelected = [...selected, option].sort()
         }
 
         setSelected(updatedSelected)
@@ -268,8 +266,8 @@ export const Select = ({
     if (type === 'multiple') {
       return selected.length > 0
         ? selected
-            .map((option) => truncateLabel(option.label, displayMaxLength))
-            .join(', ')
+          .map((option) => truncateLabel(option.label, displayMaxLength))
+          .join(', ')
         : ''
     }
 
@@ -366,9 +364,8 @@ export const Select = ({
           value={getDisplayValue()}
           placeholder={getPlaceholder(loading)}
           disabled={loading && filteredOptions.length === 0}
-          className={`${classes.select_input} ${
-            filtering ? '' : classes.pointer
-          }`}
+          className={`${classes.select_input} ${filtering ? '' : classes.pointer
+            }`}
           data-testid={`input-${id}`}
           onChange={filtering ? handleInputChange : noop}
           readOnly={!filtering}
@@ -382,9 +379,8 @@ export const Select = ({
           className={`${classes.chevron} ${isOpen ? `${classes.open}` : ''}`}
         />
         <div
-          className={`${isOpen ? classes.dropdown_open : classes.dropdown} ${
-            options.length > optionsShown ? classes.dropdown_scroll : ''
-          }`}
+          className={`${isOpen ? classes.dropdown_open : classes.dropdown} ${options.length > optionsShown ? classes.dropdown_scroll : ''
+            }`}
           role="listbox"
         >
           {filteredOptions.length === 0 ? (

diff --git a/src/molecules/question/Question.tsx b/src/molecules/question/Question.tsx
@@ -47,10 +47,14 @@ export const QuestionData = ({
                 options={[
                   {
                     id: `${question.id}-yes`,
-                    value: 1,
+                    value: '1',
                     label: labels.yes_label,
                   },
-                  { id: `${question.id}-no`, value: 0, label: labels.no_label },
+                  {
+                    id: `${question.id}-no`,
+                    value: '0',
+                    label: labels.no_label,
+                  },
                 ]}
                 onChange={(data) => {
                   onChange(data)
@@ -393,11 +397,10 @@ export const Question = ({
 
       {currentError && (
         <div
-          className={`${classes.error} ${
-            question.userQuestionType === UserQuestionType.Slider
+          className={`${classes.error} ${question.userQuestionType === UserQuestionType.Slider
               ? classes.slider_error
               : ''
-          }`}
+            }`}
         >
           <Text variant="textSmall" color="var(--awell-signalError100)">
             {currentError.error}