search by typing in symptoms

cypress/e2e/patient_spec/patient_consultation.cy.ts

@@ -59,7 +59,7 @@ describe("Patient Consultation in multiple combination", () => {
     patientConsultationPage.selectConsultationStatus(
       "Outpatient/Emergency Room"
     );
-    cy.clickAndSelectOption("#symptoms", "ASYMPTOMATIC");
+    cy.searchAndSelectOption("#symptoms", "ASYMPTOMATIC");
     patientConsultationPage.typePatientIllnessHistory(patientIllnessHistory);
     patientConsultationPage.typePatientExaminationHistory(
       patientExaminationHistory
@@ -175,7 +175,7 @@ describe("Patient Consultation in multiple combination", () => {
       "Outpatient/Emergency Room"
     );
     // Asymptomatic
-    cy.clickAndSelectOption("#symptoms", "ASYMPTOMATIC");
+    cy.searchAndSelectOption("#symptoms", "ASYMPTOMATIC");
     // CRITICAL category
     patientConsultationPage.selectPatientCategory("Critical");
     patientConsultationPage.selectPatientSuggestion("Declare Death");
@@ -234,7 +234,7 @@ describe("Patient Consultation in multiple combination", () => {
     );
     patientConsultationPage.selectPatientWard("Dummy Location 1");
     // Asymptomatic
-    cy.clickAndSelectOption("#symptoms", "ASYMPTOMATIC");
+    cy.searchAndSelectOption("#symptoms", "ASYMPTOMATIC");
     // Abnormal category
     patientConsultationPage.selectPatientCategory("Abnormal");
     patientConsultationPage.selectPatientSuggestion("Domiciliary Care");
@@ -294,7 +294,10 @@ describe("Patient Consultation in multiple combination", () => {
     // verify the free text in referring facility name
     patientConsultationPage.typeReferringFacility("Life Care Hospital");
     // Vomiting and Nausea symptoms
-    patientConsultationPage.selectSymptoms(["VOMITING", "SORE THROAT"]);
+    patientConsultationPage.typeAndMultiSelectSymptoms("s", [
+      "SPUTUM",
+      "SORE THROAT",
+    ]);
     // Stable category
     patientConsultationPage.selectPatientCategory("Stable");
     // Date of symptoms
@@ -339,7 +342,10 @@ describe("Patient Consultation in multiple combination", () => {
       "Outpatient/Emergency Room"
     );
     // Select the Symptoms - Sore throat and fever symptoms
-    patientConsultationPage.selectSymptoms(["FEVER", "SORE THROAT"]);
+    patientConsultationPage.typeAndMultiSelectSymptoms("b", [
+      "BREATHLESSNESS",
+      "BLEEDING",
+    ]);
     // Comfort Care category
     patientConsultationPage.selectPatientCategory("Comfort Care");
     // Date of symptoms

cypress/pageobject/Patient/PatientConsultation.ts

@@ -9,7 +9,9 @@ export class PatientConsultationPage {
   selectSymptoms(symptoms) {
     cy.clickAndMultiSelectOption("#symptoms", symptoms);
   }
-
+  typeAndMultiSelectSymptoms(input, symptoms) {
+    cy.typeAndMultiSelectOption("#symptoms", input, symptoms);
+  }
   selectSymptomsDate(selector: string, date: string) {
     cy.clickAndTypeDate(selector, date);
   }

cypress/pageobject/Patient/PatientLogupdate.ts

@@ -25,7 +25,7 @@ class PatientLogupdate {
   }
 
   typeAdditionalSymptoms(symptoms: string) {
-    cy.clickAndSelectOption("#additional_symptoms", symptoms);
+    cy.searchAndSelectOption("#additional_symptoms", symptoms);
   }
 
   typeSystolic(systolic: string) {

cypress/support/commands.ts

@@ -141,6 +141,21 @@ Cypress.Commands.add(
       });
   }
 );
+Cypress.Commands.add(
+  "typeAndMultiSelectOption",
+  (selector: string, input: string, options: string | string[]) => {
+    const optionArray = Array.isArray(options) ? options : [options];
+    cy.get(selector)
+      .click()
+      .type(input)
+      .then(() => {
+        optionArray.forEach((options) => {
+          cy.get("[role='option']").contains(options).click();
+        });
+        cy.get(selector).click();
+      });
+  }
+);
 
 Cypress.Commands.add(
   "clickAndSelectOption",

cypress/support/index.ts

@@ -23,6 +23,11 @@ declare global {
         selector: string,
         symptoms: string | string[]
       ): Chainable<Element>;
+      typeAndMultiSelectOption(
+        selector: string,
+        input: string,
+        symptoms: string | string[]
+      ): Chainable<Element>;
       clickAndTypeDate(date: string, selector: string): Chainable<Element>;
       clickAndSelectOption(
         element: string,

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, useRef, 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;
@@ -69,14 +70,21 @@ export const AutocompleteMutliSelect = <T, V>(
   props: AutocompleteMutliSelectProps<T, V>,
 ) => {
   const [query, setQuery] = useState(""); // Ensure lower case
+  const comboButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     props.onQuery && props.onQuery(query);
   }, [query]);
-
+  const handleSingleSelect = (o: any) => {
+    if (o.option?.isSingleSelect === true && comboButtonRef.current) {
+      comboButtonRef.current.click();
+    }
+  };
   const options = props.options.map((option) => {
     const label = props.optionLabel(option);
     return {
+      option,
       label,
+      description: props.optionDescription && props.optionDescription(option),
       search: label.toLowerCase(),
       value: (props.optionValue ? props.optionValue(option) : option) as V,
     };
@@ -114,13 +122,16 @@ 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"
             />
             {!props.disabled && (
-              <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <Combobox.Button
+                ref={comboButtonRef}
+                className="absolute inset-y-0 right-0 flex items-center pr-2"
+              >
                 <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-gray-900">
                   {props.isLoading ? (
                     <CareIcon icon="l-spinner" className="animate-spin" />
@@ -173,14 +184,28 @@ export const AutocompleteMutliSelect = <T, V>(
                       key={`${props.id}-option-${index}`}
                       className={dropdownOptionClassNames}
                       value={option}
+                      onClick={() => {
+                        handleSingleSelect(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>
                   ))}