search by typing in symptoms

src/Components/Common/SymptomsSelect.tsx

@@ -1,11 +1,11 @@
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { SYMPTOM_CHOICES } from "../../Common/constants";
+import { AutocompleteMutliSelect } from "../Form/FormFields/AutocompleteMultiselect";
 import FormField from "../Form/FormFields/FormField";
 import {
   FormFieldBaseProps,
   useFormFieldPropsResolver,
 } from "../Form/FormFields/Utils";
-import MultiSelectMenuV2 from "../Form/MultiSelectMenuV2";
 
 const ASYMPTOMATIC_ID = 1;
 
@@ -69,15 +69,15 @@ export const SymptomsSelect = (props: FormFieldBaseProps<number[]>) => {
 
   return (
     <FormField field={field}>
-      <MultiSelectMenuV2
+      <AutocompleteMutliSelect
         id={field.id}
         options={SYMPTOM_CHOICES}
         disabled={props.disabled}
         placeholder="Select symptoms"
         optionLabel={(option) => option.text}
         optionValue={(option) => option.id}
+        value={props.value || []}
         optionDescription={getDescription}
-        value={props.value}
         onChange={updateSelection}
       />
     </FormField>

src/Components/Form/FormFields/AutocompleteMultiselect.tsx

@@ -3,7 +3,7 @@ import {
   MultiSelectOptionChip,
   dropdownOptionClassNames,
 } from "../MultiSelectMenuV2";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Combobox } from "@headlessui/react";
 import { DropdownTransition } from "../../Common/components/HelperComponents";
@@ -47,6 +47,7 @@ type AutocompleteMutliSelectProps<T, V = T> = {
   disabled?: boolean | undefined;
   value: V[];
   placeholder?: string;
+  optionDescription?: OptionCallback<T, ReactNode>;
   optionLabel: OptionCallback<T, string>;
   optionValue?: OptionCallback<T, V>;
   className?: string;
@@ -77,6 +78,7 @@ export const AutocompleteMutliSelect = <T, V>(
     const label = props.optionLabel(option);
     return {
       label,
+      description: props.optionDescription && props.optionDescription(option),
       search: label.toLowerCase(),
       value: (props.optionValue ? props.optionValue(option) : option) as V,
     };
@@ -114,7 +116,7 @@ export const AutocompleteMutliSelect = <T, V>(
               placeholder={
                 value.length
                   ? `${value.length} item(s) selected`
-                  : props.placeholder || "Select"
+                  : props.placeholder ?? "Select"
               }
               onChange={(event) => setQuery(event.target.value.toLowerCase())}
               autoComplete="off"
@@ -175,12 +177,23 @@ export const AutocompleteMutliSelect = <T, V>(
                       value={option}
                     >
                       {({ selected }) => (
-                        <div className="flex justify-between">
-                          {option.label}
-                          {selected && (
-                            <CareIcon icon="l-check" className="text-lg" />
+                        <>
+                          <div className="flex justify-between">
+                            {option.label}
+                            {selected && (
+                              <CareIcon icon="l-check" className="text-lg" />
+                            )}
+                          </div>
+                          {option.description && (
+                            <p
+                              className={`font-normal ${
+                                selected ? "text-primary-200" : "text-gray-700"
+                              }`}
+                            >
+                              {option.description}
+                            </p>
                           )}
-                        </div>
+                        </>
                       )}
                     </Combobox.Option>
                   ))}