From 6ae0d1112dface5a8c9f9b135b9bb05f8aab98bb Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Thu, 13 Feb 2025 14:59:44 -0600
Subject: [PATCH] fixed the search select options rendering the value and not
 the label properly

---
 src/common/SearchSelect.tsx | 134 +++++++++++++++++++-----------------
 1 file changed, 71 insertions(+), 63 deletions(-)

diff --git a/src/common/SearchSelect.tsx b/src/common/SearchSelect.tsx
index 3564db3..429ebd3 100644
--- a/src/common/SearchSelect.tsx
+++ b/src/common/SearchSelect.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Avatar, CircularProgress, createFilterOptions } from "@mui/material";
+import { Autocomplete, Avatar, Box, CircularProgress, createFilterOptions } from "@mui/material";
 import TextField from "@mui/material/TextField";
 import { makeStyles } from "@mui/styles";
 // import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
@@ -12,8 +12,8 @@ const useStyles = makeStyles(() => ({
 );
 
 export interface Option {
-  value: any;
   label: string;
+  value: any;
   group?: string;
   new?: boolean;
   icon?: string;
@@ -65,16 +65,46 @@ export default function SearchSelect(props: Props) {
     return { value: s, label: s } as Option;
   };
 
-  const anyToLabel = (o: any): string => {
-    if (o.text && o.value) {
-      return o.text + " - " + o.value
-    } else if (o.value) {
-      return o.value
-    } else if (o.label) {
-      return o.label
+  // const anyToLabel = (o: any): string => {
+  //   if (o.text && o.value) {
+  //     return o.text + " - " + o.value
+  //   } else if (o.value) {
+  //     return o.value
+  //   } else if (o.label) {
+  //     return o.label
+  //   }
+  //   return o.toString();
+  // };
+
+  const optionSelected = (newValue: string | Option | (string | Option)[] | null) => {
+    if (multiple === true) {
+      if (changeMulti) {
+        if (Array.isArray(newValue)) {
+          changeMulti(newValue.map(v => (typeof v === "string" ? stringToOption(v) : v)));
+        } else {
+          changeMulti(
+            newValue
+              ? [typeof newValue === "string" ? stringToOption(newValue) : newValue]
+              : null
+          );
+        }
+      } else {
+        console.warn("SearchSelect requires changeMulti to be defined when 'multiple' is true");
+      }
+    } else {
+      if (changeSelection) {
+        if (Array.isArray(newValue)) {
+          console.warn("changeSelection requires a single element but received an array");
+        } else {
+          changeSelection(typeof newValue === "string" ? stringToOption(newValue) : newValue);
+        }
+      } else {
+        console.warn(
+          "SearchSelect requires changeSelection to be defined when 'multiple' is false"
+        );
+      }
     }
-    return o.toString();
-  };
+  }
 
   return (
     <Autocomplete
@@ -85,33 +115,7 @@ export default function SearchSelect(props: Props) {
       autoHighlight
       disabled={disabled}
       onChange={(_, newValue) => {
-        if (multiple === true) {
-          if (changeMulti) {
-            if (Array.isArray(newValue)) {
-              changeMulti(newValue.map(v => (typeof v === "string" ? stringToOption(v) : v)));
-            } else {
-              changeMulti(
-                newValue
-                  ? [typeof newValue === "string" ? stringToOption(newValue) : newValue]
-                  : null
-              );
-            }
-          } else {
-            console.warn("SearchSelect requires changeMulti to be defined when 'multiple' is true");
-          }
-        } else {
-          if (changeSelection) {
-            if (Array.isArray(newValue)) {
-              console.warn("changeSelection requires a single element but received an array");
-            } else {
-              changeSelection(typeof newValue === "string" ? stringToOption(newValue) : newValue);
-            }
-          } else {
-            console.warn(
-              "SearchSelect requires changeSelection to be defined when 'multiple' is false"
-            );
-          }
-        }
+        optionSelected(newValue)
       }}
       options={options.sort((a, b) => {
         let aGroup = a.group ? a.group : "";
@@ -133,18 +137,18 @@ export default function SearchSelect(props: Props) {
 
         return filtered;
       }}
-      getOptionLabel={option => {
-        // return anyToLabel(option)
-        // console.log(option)
-        // console.log("Is Option: ",option instanceof Option)
-        if (option instanceof Option) {
-          return option.text + " - " + option.value
-        // } else if (option.text && option.value) {
+      // getOptionLabel={option => {
+      //   // return anyToLabel(option)
+      //   // console.log(option)
+      //   // console.log("Is Option: ",option instanceof Option)
+      //   if (option instanceof Option) {
+      //     return option.text + " - " + option.value
+      //   // } else if (option.text && option.value) {
 
-        } else {
-          return anyToLabel(option)
-        }
-      }}
+      //   } else {
+      //     return anyToLabel(option)
+      //   }
+      // }}
       // getOptionSelected={
       //   getOptionSelected ? getOptionSelected : (o: { value: any; }, v: { value: any; }) => (o && v ? o.value === v.value : false)
       // }
@@ -169,20 +173,24 @@ export default function SearchSelect(props: Props) {
           }}
         />
       )}
-      // renderOption={params => (
-      //   <div
-      //     style={{
-      //       display: "flex",
-      //       flexDirection: "row"
-      //     }}>
-      //     <div style={{ marginTop: "auto", marginBottom: "auto" }}>
-      //       {!isArray(params) && params?.icon ? <Avatar src={params?.icon} /> : ""}
-      //     </div>
-      //     <div style={{ marginTop: "auto", marginBottom: "auto", marginLeft: "1rem" }}>
-      //       {params.label}
-      //     </div>
-      //   </div>
-      // )}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+        <Box
+          key={key}
+          component="li"
+          sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+          {...optionProps}
+        >
+          <Box style={{ marginTop: "auto", marginBottom: "auto" }}>
+            {!isArray(option) && option?.icon ? <Avatar src={option?.icon} /> : ""}
+          </Box>
+          <Box style={{ marginTop: "auto", marginBottom: "auto", marginLeft: "1rem" }}>
+            {option.label}
+          </Box>
+        </Box>
+        )
+      }}
       loading={loading}
       selectOnFocus
       clearOnBlur