[Bug] Fix Patient Search when patients have the same name (#1396)

Jira Ticket Number:
[CTW-1620](https://zeushealth.atlassian.net/browse/CTW-1620)

This PR fixes a bug in patient search when there are multiple patients
with the same name. Previously the `ComboBoxOption`'s value was the
label, which comprised the patient's full name. When an option was
selected, the `ComboBoxField` would use the label to look up the first
occurrence in the results, so if there are 2 or more patients with the
same full name, it would always return the first patient.

Now the `ComboBoxOption`'s value is the entire option so we can just
return the option's value to the `onCustomSelectChange` callback.

## How did you test it?

Manually tested in the demo app.
Manually tested with relative dependancies in standalone.

## How will you know that this is working after deployment?

Manually test in all environments


[CTW-1620]:
https://zeushealth.atlassian.net/browse/CTW-1620?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

.changeset/chilled-suns-shout.md

@@ -0,0 +1,5 @@
+---
+"@zus-health/ctw-component-library": patch
+---
+
+Fix ComboBoxField to select the correct option when multiple options have identical labels

src/App.tsx

@@ -22,12 +22,10 @@ import {
   ZusAggregatedProfileIFrame,
   PatientConditionsAll,
   PatientsTableFQS,
-  UnreadRecordsNotification,
 } from ".";
 
 import { PatientMedicationDispense } from "./components/content/medication-dispense/patient-medication-dispense";
 import { ThemeProviderProps } from "@/components/core/providers/theme/theme-provider";
-import { UseQueryResult } from "@tanstack/react-query";
 import { MatchedPatients } from "./components/content/matched-patients/matched-patients";
 import { PatientsTable } from "./components/content/patients/patients-table-ods";
 import { notify } from "./components/core/toast";

src/components/content/patients/patients-search.tsx

@@ -69,14 +69,12 @@ export const PatientSearch = withErrorBoundary(
         readonly={false}
         isLoading={isFetching}
         name="patient-search"
-        defaultSearchTerm=""
         onCustomSelectChange={onSearchClick}
         renderCustomOption={(e) => <CustomComboBox option={e as CustomPatientOptionValue} />}
         onSearchChange={(e) => {
           setSearchValue(e);
           setPatients([]);
         }}
-        defaultValue={{}}
         placeholder="Search by patient name or identifier"
       />
     );
@@ -86,7 +84,7 @@ export const PatientSearch = withErrorBoundary(
 
 export const CustomComboBox = ({ option }: { option: CustomPatientOptionValue }) => (
   <Combobox.Option
-    value={option.label}
+    value={option}
     className={({ active }) =>
       `ctw-relative ctw-flex ctw-cursor-default ctw-select-none ctw-space-x-2 ctw-py-2 ctw-pl-4 ctw-pr-4 ${
         active ? "ctw-bg-primary-light ctw-text-primary-dark" : "ctw-text-content-black"

src/components/core/form/combobox-field.tsx

@@ -15,8 +15,8 @@ export type ComboboxFieldProps<T> = {
   options: ComboxboxFieldOption[];
   isLoading: boolean;
   name: string;
-  defaultValue: T;
-  defaultSearchTerm: string;
+  defaultValue?: T;
+  defaultSearchTerm?: string;
   onSearchChange: (searchTerm: string) => void;
   readonly: boolean | undefined;
   enableSearchIcon?: boolean;
@@ -29,8 +29,8 @@ export const ComboboxField = <T,>({
   options,
   isLoading,
   name,
-  defaultSearchTerm,
-  defaultValue,
+  defaultSearchTerm = "",
+  defaultValue = {} as T,
   onSearchChange,
   readonly,
   enableSearchIcon = false,
@@ -66,11 +66,11 @@ export const ComboboxField = <T,>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onSearchChange]);
 
-  const onSelectChange = (eventValue: string) => {
-    const currentItem = options.filter((item) => item.label === eventValue)[0];
-    setInputValue(currentItem.value);
-    setSearchTerm(eventValue);
-    onCustomSelectChange?.(currentItem);
+  const onSelectChange = (e: unknown) => {
+    const option = e as ComboxboxFieldOption;
+    setSearchTerm(option.label);
+    setInputValue(option.value);
+    onCustomSelectChange?.(option);
   };
 
   return (
@@ -174,7 +174,7 @@ const ComboboxOptions = ({
 
 const ComboboxOption = ({ option }: { option: ComboxboxFieldOption }) => (
   <Combobox.Option
-    value={option.label}
+    value={option}
     className={({ active }) =>
       `ctw-relative ctw-cursor-default ctw-select-none ctw-py-2 ctw-pl-4 ctw-pr-4 ${
         active ? "ctw-bg-primary-light ctw-text-primary-dark" : "ctw-text-content-black"