Fixed SideDrawerChips

src/components/FormattedChip.tsx

@@ -16,6 +16,7 @@ export default function FormattedChip(props: ChipProps) {
   const defaultColor = paletteToMui(palette.aGray);
   const { mode } = useTheme().palette;
   const fallback = { backgroundColor: defaultColor[mode] };
+  const { sx, ...newProps } = props;
 
   const label =
     typeof props.label === "string" ? props.label.toLowerCase() : "";
@@ -24,7 +25,6 @@ export default function FormattedChip(props: ChipProps) {
   return (
     <Chip
       size="small"
-      label={props.label}
       sx={
         inVariant && isEqual(props.sx, fallback)
           ? {
@@ -33,6 +33,7 @@ export default function FormattedChip(props: ChipProps) {
             }
           : props.sx
       }
+      {...newProps}
     />
   );
 }

src/components/fields/MultiSelect/SideDrawerField.tsx

@@ -7,6 +7,8 @@ import FormattedChip from "@src/components/FormattedChip";
 
 import { fieldSx } from "@src/components/SideDrawer/utils";
 import { sanitiseValue } from "./utils";
+import { getColors } from "@src/components/fields/SingleSelect/Settings";
+import palette, { paletteToMui } from "@src/theme/palette";
 
 export default function MultiSelect({
   column,
@@ -15,8 +17,9 @@ export default function MultiSelect({
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
+  const defaultColor = paletteToMui(palette.aGray);
   const config = column.config ?? {};
-  const colors = column.config?.colors ?? {};
+  const colors = column.config?.colors ?? [];
   const { mode } = useTheme().palette;
 
   const handleDelete = (index: number) => () => {
@@ -79,8 +82,7 @@ export default function MultiSelect({
                     onDelete={disabled ? undefined : handleDelete(i)}
                     sx={{
                       backgroundColor:
-                        colors[item.toLowerCase()] &&
-                        colors[item.toLowerCase()][mode],
+                        getColors(colors, item)[mode] || defaultColor[mode],
                     }}
                   />
                 </Grid>