From 3878d79733fbeb1dc9050664e8900afb9d03ebde Mon Sep 17 00:00:00 2001
From: syedsalehinipg <syed.salehin@ipg-automotive.uk>
Date: Mon, 13 Nov 2023 11:37:26 +0000
Subject: [PATCH] use isOptionEqualToValue method on autocomplete

---
 src/Autocomplete/Autocomplete.tsx      | 21 ++++++++++++++++++++-
 src/Autocomplete/Autocomplete.types.ts |  2 +-
 src/Common.types.ts                    |  3 +++
 src/LabelSelector/LabelSelector.jsx    |  4 +++-
 src/utils/common.ts                    |  6 ++++++
 5 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/common.ts

diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx
index 10a67b958..cb64647dd 100644
--- a/src/Autocomplete/Autocomplete.tsx
+++ b/src/Autocomplete/Autocomplete.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { AutocompleteProps, KeyValueOption } from "./Autocomplete.types";
 import {
   Box,
   Checkbox,
@@ -10,6 +9,10 @@ import {
 } from "@mui/material";
 import { CheckBox, CheckBoxOutlineBlank } from "@mui/icons-material";
 
+import { AutocompleteProps } from "./Autocomplete.types";
+import { KeyValueOption } from "../Common.types";
+import { isKeyValueOption } from "../utils/common";
+
 export default function Autocomplete<
   Value extends KeyValueOption | string,
   Multiple extends boolean | undefined
@@ -55,6 +58,22 @@ export default function Autocomplete<
       clearIcon={multiple ? null : undefined}
       disabled={disabled}
       size={size}
+      isOptionEqualToValue={(option, value) => {
+        // if the option is a key value pair, compare option.value to value
+        if (isKeyValueOption(option)) {
+          if (option.value === value) {
+            return true;
+          }
+        } else {
+          // if the option is not a key value then compare option to value
+          if (option === value) {
+            return true;
+          }
+        }
+
+        // if the option is not a match, return false
+        return false;
+      }}
     />
   );
 }
diff --git a/src/Autocomplete/Autocomplete.types.ts b/src/Autocomplete/Autocomplete.types.ts
index 0732826b0..487b41a4c 100644
--- a/src/Autocomplete/Autocomplete.types.ts
+++ b/src/Autocomplete/Autocomplete.types.ts
@@ -3,7 +3,7 @@ import {
   TextFieldProps
 } from "@mui/material";
 
-export type KeyValueOption = { key: string | number; value: string };
+import { KeyValueOption } from "../Common.types";
 
 export type AutocompleteProps<
   Value extends string | KeyValueOption,
diff --git a/src/Common.types.ts b/src/Common.types.ts
index 4c1407dc4..af461da3e 100644
--- a/src/Common.types.ts
+++ b/src/Common.types.ts
@@ -11,3 +11,6 @@ export type Label = {
   description?: string;
   name: string;
 };
+
+// KeyValueOption type
+export type KeyValueOption = { key: string | number; value: string };
diff --git a/src/LabelSelector/LabelSelector.jsx b/src/LabelSelector/LabelSelector.jsx
index b524fbace..991be422e 100644
--- a/src/LabelSelector/LabelSelector.jsx
+++ b/src/LabelSelector/LabelSelector.jsx
@@ -252,7 +252,9 @@ function LabelSelector({
         }
         noOptionsText="No labels found"
         getOptionLabel={option => option.name}
-        isOptionEqualToValue={(option, value) => option._id === value._id}
+        isOptionEqualToValue={(option, value) => {
+          return option._id === value._id ?? false;
+        }}
         value={value || null}
       />
       <EditLabelDialog
diff --git a/src/utils/common.ts b/src/utils/common.ts
new file mode 100644
index 000000000..0d54aabda
--- /dev/null
+++ b/src/utils/common.ts
@@ -0,0 +1,6 @@
+import { KeyValueOption } from "../Common.types";
+
+// This function is used to check if an object is of type KeyValueOption
+export function isKeyValueOption<T>(obj: T): obj is T & KeyValueOption {
+  return obj && typeof obj === "object" && "key" in obj && "value" in obj;
+}