@linzjs/step-ag-grid 2.5.0 → 3.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "2.5.0",
+  "version": "3.0.1",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridCell.tsx

@@ -9,15 +9,14 @@ import {
 } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
-import { GridIcon } from "../components/GridIcon";
+import { GridIcon } from "./GridIcon";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { GridPopoverContext } from "../contexts/GridPopoverContext";
 import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
   editor?: (editorProps: E) => JSX.Element;
-  editorParams?: E; // Omit<E, keyof CellParams<IFormTestRow>>
+  editorParams?: E;
 }
 
 export const GridCellRenderer = (props: ICellRendererParams) => {
@@ -46,6 +45,7 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
 // This is so that typescript retains the row type to pass to the GridCells
 export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
   _?: RowType;
+  editor?: (editorProps: any) => JSX.Element;
 }
 
 /*
@@ -66,7 +66,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     ...(custom?.editor && {
       cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
       editable: props.editable ?? true,
-      cellEditor: GenericCellEditorComponent(custom.editor),
+      cellEditor: GenericCellEditorComponentWrapper(custom),
     }),
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
@@ -91,37 +91,13 @@ export interface CellEditorCommon {
   className?: string | undefined;
 }
 
-export interface CellParams<RowType extends GridBaseRow> {
-  value: any;
-  data: RowType;
-  field: string | undefined;
-  selectedRows: RowType[];
-}
-
-// TODO memo?
-export const GenericCellEditorComponent = (editor: (props: any) => JSX.Element) =>
-  forwardRef(function GenericCellEditorComponent2(props: ICellEditorParams, _) {
+export const GenericCellEditorComponentWrapper = (custom?: { editor?: (props: any) => JSX.Element }) => {
+  return forwardRef(function GenericCellEditorComponentFr(cellEditorParams: ICellEditorParams, _) {
     return (
-      <GridPopoverContextProvider>
-        <GenericCellEditorComponent3 {...{ ...props, editor }} />
+      <GridPopoverContextProvider props={cellEditorParams}>
+        {<cellEditorParams.colDef.cellRenderer {...cellEditorParams} {...cellEditorParams.colDef.cellRendererParams} />}
+        {custom?.editor && <custom.editor {...cellEditorParams} />}
       </GridPopoverContextProvider>
     );
   });
-
-const GenericCellEditorComponent3 = (props: ICellEditorParams & { editor: (props: any) => JSX.Element }) => {
-  const { setProps, propsRef } = useContext(GridPopoverContext);
-
-  const { colDef } = props;
-  const { cellEditorParams } = colDef;
-  const multiEdit = cellEditorParams?.multiEdit ?? false;
-
-  // TODO don't need all these props in context
-  setProps(props, multiEdit);
-
-  return (
-    <>
-      {<colDef.cellRenderer {...props} />}
-      {props?.editor && <props.editor {...cellEditorParams} {...propsRef.current} />}
-    </>
-  );
 };

package/src/components/GridPopoverHook.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "../contexts/GridContext";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "../react-menu3";
-import { GridPopoverContext } from "../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../contexts/GridPopoverContext";
 import { MenuCloseEvent } from "../react-menu3/types";
 
 export interface GridPopoverHookProps<RowType> {
@@ -12,7 +12,7 @@ export interface GridPopoverHookProps<RowType> {
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
   const { stopEditing } = useContext(GridContext);
-  const { anchorRef, saving, propsRef } = useContext(GridPopoverContext);
+  const { anchorRef, saving, updateValue } = useGridPopoverContext<RowType>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
 
@@ -22,16 +22,12 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
 
   const triggerSave = useCallback(
     async (reason?: string) => {
-      if (
-        reason == "cancel" ||
-        !props.save ||
-        (propsRef.current?.updateValue && (await propsRef.current?.updateValue(props.save)))
-      ) {
+      if (reason == "cancel" || !props.save || (updateValue && (await updateValue(props.save)))) {
         setOpen(false);
         stopEditing();
       }
     },
-    [props, stopEditing, propsRef],
+    [props.save, stopEditing, updateValue],
   );
 
   const popoverWrapper = useCallback(

package/src/components/GridSubComponentTextArea.tsx

@@ -49,12 +49,6 @@ export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps):
       <TextInputFormatted
         className={"free-text-input"}
         value={value}
-        onMouseEnter={(e) => {
-          if (document.activeElement != e.currentTarget) {
-            e.currentTarget.focus();
-            e.currentTarget.selectionStart = e.currentTarget.value.length;
-          }
-        }}
         onChange={(e) => setValue(e.target.value)}
         error={validate(value)}
         inputProps={{

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,14 +1,15 @@
 import "../../styles/GridFormDropDown.scss";
 
-import { MenuItem, MenuDivider, FocusableItem, MenuHeader } from "../../react-menu3";
-import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
+import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
+import { KeyboardEvent, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridContext } from "../../contexts/GridContext";
 import { delay } from "lodash-es";
 import debounce from "debounce-promise";
-import { CellEditorCommon, CellParams } from "../GridCell";
+import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
   // Note the row that was clicked on will be first
@@ -43,6 +44,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
     | "GridPopoverEditDropDown-containerUnlimited"
     | string
     | undefined;
+  // local means the filter won't change if it's reloaded, reload means it does change
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
@@ -53,11 +55,15 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
   optionsRequestCancel?: () => void;
 }
 
+const fieldToString = (field: any) => {
+  return typeof field == "symbol" ? field.toString() : `${field}`;
+};
+
 export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
-  _props: GridFormPopoutDropDownProps<RowType, ValueType>,
+  props: GridFormPopoutDropDownProps<RowType, ValueType>,
 ) => {
-  const props = _props as GridFormPopoutDropDownProps<RowType, ValueType> & CellParams<RowType>;
-  const { updatingCells, stopEditing } = useContext(GridContext);
+  const { selectedRows, field, updateValue } = useGridPopoverContext<RowType>();
+  const { stopEditing } = useContext(GridContext);
 
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
@@ -66,9 +72,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   const [subComponentValues, setSubComponentValues] = useState<{ optionValue: any; subComponentValue: any }[]>([]);
 
   const selectItemHandler = useCallback(
-    async (value: ValueType, subComponentValue?: ValueType): Promise<boolean> => {
-      const field = props.field;
-      return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
+    async (value: ValueType, subComponentValue?: ValueType): Promise<boolean> =>
+      updateValue(async (selectedRows) => {
         const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
         if (hasChanged) {
           if (props.onSelectedItem) {
@@ -78,22 +83,17 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
           }
         }
         return true;
-      });
-    },
-    [props, updatingCells],
+      }),
+    [field, props, updateValue],
   );
 
   const selectFilterHandler = useCallback(
-    async (value: string): Promise<boolean> => {
-      const field = props.field;
-      return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
-        if (props.onSelectFilter) {
-          await props.onSelectFilter({ selectedRows, value });
-        }
+    async (value: string) =>
+      updateValue(async (selectedRows) => {
+        props.onSelectFilter && (await props.onSelectFilter({ selectedRows, value }));
         return true;
-      });
-    },
-    [props, updatingCells],
+      }),
+    [props, updateValue],
   );
 
   // Load up options list if it's async function
@@ -104,7 +104,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
 
     (async () => {
       if (typeof optionsConf == "function") {
-        optionsConf = await optionsConf(props.selectedRows, filter);
+        optionsConf = await optionsConf(selectedRows, filter);
       }
 
       const optionsList = optionsConf?.map((item) => {
@@ -127,7 +127,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
       }
       optionsInitialising.current = false;
     })();
-  }, [filter, options, props]);
+  }, [filter, options, props, selectedRows]);
 
   // Local filtering.
   useEffect(() => {
@@ -214,7 +214,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
       <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
           {options && options.length == filteredValues?.length && (
-            <MenuItem key={`${props.field}-empty`}>[Empty]</MenuItem>
+            <MenuItem key={`${fieldToString(field)}-empty`}>[Empty]</MenuItem>
           )}
           {options?.map((item: FinalSelectOption<ValueType | string>, index) =>
             item.value === MenuSeparatorString ? (
@@ -225,23 +225,22 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
               <div key={`menu-wrapper-${index}`}>
                 {!item.subComponent ? (
                   <MenuItem
-                    key={`${props.field}-${index}`}
+                    key={`${fieldToString(field)}-${index}`}
                     disabled={!!item.disabled}
                     title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                     value={item.value}
                     onClick={() => {
-                      selectItemHandler(item.value as ValueType);
+                      selectItemHandler(item.value as ValueType).then();
                     }}
                   >
                     {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
                   </MenuItem>
                 ) : (
-                  <FocusableItem className={"LuiDeprecatedForms"} key={`${props.field}-${index}_subcomponent`}>
+                  <FocusableItem className={"LuiDeprecatedForms"} key={`${fieldToString(field)}-${index}_subcomponent`}>
                     {(ref: any) =>
-                      item.subComponent &&
-                      item.subComponent(
-                        {
-                          setValue: (value: any) => {
+                      item.subComponent && (
+                        <item.subComponent
+                          setValue={(value: any) => {
                             const localSubComponentValues = [...subComponentValues];
                             const subComponentValueIndex = localSubComponentValues.findIndex(
                               ({ optionValue }) => optionValue === item.value,
@@ -255,8 +254,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                               });
                             }
                             setSubComponentValues(localSubComponentValues);
-                          },
-                          keyDown: (key: string, event: KeyboardEvent<HTMLInputElement>) => {
+                          }}
+                          keyDown={(key: string, event: KeyboardEvent<HTMLInputElement>) => {
                             const subComponentItem = subComponentValues.find(
                               ({ optionValue }) => optionValue === item.value,
                             );
@@ -272,10 +271,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                               });
                             }
                             return false;
-                          },
-                          key: `${props.field}-${index}_subcomponent_inner`,
-                        },
-                        ref,
+                          }}
+                          key={`${fieldToString(field)}-${index}_subcomponent_inner`}
+                        />
                       )
                     }
                   </FocusableItem>

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -5,7 +5,8 @@ import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellEditorCommon, CellParams } from "../GridCell";
+import { CellEditorCommon } from "../GridCell";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeHolder?: string;
@@ -13,31 +14,34 @@ export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends C
   onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
 }
 
-export const GridFormEditBearing = <RowType extends GridBaseRow>(_props: GridFormEditBearingProps<RowType>) => {
-  const props = _props as GridFormEditBearingProps<RowType> & CellParams<RowType>;
-  const [value, setValue] = useState<string>(`${props.value ?? ""}`);
+export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
+  const { field, value: initialValue } = useGridPopoverContext<RowType>();
+
+  const [value, setValue] = useState<string>(`${initialValue ?? ""}`);
+
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (bearingStringValidator(value)) return false;
       const parsedValue = bearingNumberParser(value);
       // Value didn't change so don't save just cancel
-      if (parsedValue === props.value) {
+      if (parsedValue === initialValue) {
         return true;
       }
 
       if (props.onSave) {
         return await props.onSave(selectedRows, parsedValue);
       } else {
-        const field = props.field;
         if (field == null) {
           console.error("field is not defined in ColDef");
         } else {
-          selectedRows.forEach((row) => ((row as Record<string, any>)[field] = parsedValue));
+          selectedRows.forEach((row) => {
+            row[field] = parsedValue as any;
+          });
         }
       }
       return true;
     },
-    [props, value],
+    [field, initialValue, props, value],
   );
   const { triggerSave, popoverWrapper } = useGridPopoverHook({ className: props.className, save });
 

package/src/components/gridForm/GridFormMessage.tsx

@@ -3,22 +3,24 @@ import { useEffect, useState } from "react";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellEditorCommon, CellParams } from "../GridCell";
+import { CellEditorCommon } from "../GridCell";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
-  message: (cellParams: CellParams<RowType>) => Promise<string | JSX.Element> | string | JSX.Element;
+  message: (selectedRows: RowType[]) => Promise<string | JSX.Element> | string | JSX.Element;
 }
 
-export const GridFormMessage = <RowType extends GridBaseRow>(_props: GridFormMessageProps<RowType>) => {
-  const props = _props as GridFormMessageProps<RowType> & CellParams<RowType>;
+export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormMessageProps<RowType>) => {
+  const { selectedRows } = useGridPopoverContext<RowType>();
+
   const [message, setMessage] = useState<string | JSX.Element | null>(null);
   const { popoverWrapper } = useGridPopoverHook({ className: props.className });
 
   useEffect(() => {
     (async () => {
-      setMessage(await props.message(props));
+      setMessage(await props.message(selectedRows));
     })().then();
-  }, [props]);
+  }, [props, selectedRows]);
 
   return popoverWrapper(
     <ComponentLoadingWrapper loading={message === null} className={clsx("GridFormMessage-container", props.className)}>

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,16 +1,17 @@
 import "../../styles/GridFormMultiSelect.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "../../react-menu3";
-import { useCallback, useEffect, useRef, useState, KeyboardEvent, useMemo } from "react";
+import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
+import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { delay, pick, pickBy } from "lodash-es";
+import { delay, fromPairs, isEqual, omit, pick, toPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "./GridFormDropDown";
-import { CellEditorCommon, CellParams } from "../GridCell";
+import { CellEditorCommon } from "../GridCell";
 import { ClickEvent } from "../../react-menu3/types";
 import { GridSubComponentContext } from "contexts/GridSubComponentContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
@@ -21,11 +22,10 @@ interface MultiFinalSelectOption<ValueType> {
 export type MultiSelectOption<ValueType> = ValueType | MultiFinalSelectOption<ValueType>;
 
 export interface SelectedOptionResult<ValueType> extends MultiFinalSelectOption<ValueType> {
-  subValue: any;
+  subValue?: any;
 }
 
 export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
-  // This overrides CellEditorCommon to provide some common class options
   className?:
     | "GridMultiSelect-containerSmall"
     | "GridMultiSelect-containerMedium"
@@ -39,28 +39,22 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
   options:
     | MultiSelectOption<ValueType>[]
     | ((selectedRows: RowType[]) => Promise<MultiSelectOption<ValueType>[]> | MultiSelectOption<ValueType>[]);
-  initialSelectedValues?: (selectedRows: RowType[]) => any[] | Record<string, any>;
+  initialSelectedValues?: (selectedRows: RowType[]) => any[] | Record<string, null | any>;
 }
 
 export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
   props: GridFormMultiSelectProps<RowType, ValueType>,
 ) => {
-  const { selectedRows } = props as unknown as CellParams<RowType>;
+  const { selectedRows } = useGridPopoverContext<RowType>();
 
-  const initialiseValues = useMemo(
-    () => props.initialSelectedValues && props.initialSelectedValues(selectedRows),
-    [props, selectedRows],
-  );
+  const initialiseValues = useMemo(() => {
+    const r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
+    // convert array of strings to object<value,null>
+    return Array.isArray(r) ? fromPairs(r.map((v) => [v, null])) : r;
+  }, [props, selectedRows]);
 
   const subComponentIsValid = useRef<Record<string, boolean>>({});
-  const [subSelectedValues, setSubSelectedValues] = useState<Record<string, any>>(
-    initialiseValues && !Array.isArray(initialiseValues)
-      ? pickBy(initialiseValues, (value) => typeof value !== "boolean")
-      : {},
-  );
-  const [selectedValues, setSelectedValues] = useState<any[]>(() =>
-    initialiseValues ? (Array.isArray(initialiseValues) ? initialiseValues : Object.keys(initialiseValues)) : [],
-  );
+  const [selectedValues, setSelectedValues] = useState<Record<string, null | any>>(() => initialiseValues ?? {});
 
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
@@ -70,23 +64,33 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (props.onSave) {
-        const validations = pick(subComponentIsValid.current, selectedValues);
+        if (!options) {
+          console.error("options not initialised");
+          return false;
+        }
+
+        const validations = pick(subComponentIsValid.current, Object.keys(selectedValues));
         const notValid = Object.values(validations).some((v) => !v);
         if (notValid) return false;
 
-        const selectedOptions = selectedValues.map((row) => (options ?? []).find((opt) => opt.value == row)) ?? [];
-        const selectedResults = selectedOptions.map(
-          (selectedOption) =>
-            ({
-              ...selectedOption,
-              subValue: subSelectedValues[`${selectedOption?.value}`],
-            } as SelectedOptionResult<ValueType>),
-        );
-        return await props.onSave(selectedRows, selectedResults);
+        const menuOptionSubValueResult = toPairs(selectedValues).map(([value, subValue]) => {
+          const o = {
+            ...options.find((o) => o.value == value),
+          } as SelectedOptionResult<ValueType>;
+          o.subValue = subValue;
+          return o;
+        });
+
+        if (isEqual(initialiseValues, selectedValues)) {
+          // No changes to save
+          return true;
+        }
+
+        return await props.onSave(selectedRows, menuOptionSubValueResult);
       }
       return true;
     },
-    [options, props, selectedValues, subSelectedValues],
+    [initialiseValues, options, props, selectedValues],
   );
 
   // Load up options list if it's async function
@@ -101,7 +105,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
       }
 
       const optionsList = optionsConf?.map((item) => {
-        if (item == null || typeof item == "string" || typeof item == "number") {
+        if (item == null || typeof item === "string" || typeof item === "number") {
           item = { value: item as ValueType, label: item } as MultiFinalSelectOption<ValueType>;
         }
         return item;
@@ -134,6 +138,17 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
     );
   }, [props.filtered, filter, options]);
 
+  const toggleValue = useCallback(
+    (item: MultiFinalSelectOption<ValueType>) => {
+      if (`${item.value}` in selectedValues) {
+        setSelectedValues(omit(selectedValues, [`${item.value}`]));
+      } else {
+        setSelectedValues({ ...selectedValues, [`${item.value}`]: null });
+      }
+    },
+    [selectedValues],
+  );
+
   const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options} className={"GridFormMultiSelect-container"}>
@@ -167,30 +182,21 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
             ) : filteredValues.includes(item.value) ? null : (
               <div key={`${index}`}>
                 <MenuItem
-                  key={`${index}`}
                   onClick={(e: ClickEvent) => {
                     e.keepOpen = true;
-                    if (selectedValues.includes(item.value)) {
-                      setSelectedValues(selectedValues.filter((value) => value != item.value));
-                    } else {
-                      setSelectedValues([...selectedValues, item.value]);
-                    }
+                    toggleValue(item);
                   }}
                   onKeyDown={async (e: KeyboardEvent) => {
                     if (e.key === "Enter") triggerSave().then();
                     else if (e.key === " ") {
-                      if (selectedValues.includes(item.value)) {
-                        setSelectedValues(selectedValues.filter((value) => value != item.value));
-                      } else {
-                        setSelectedValues([...selectedValues, item.value]);
-                      }
+                      toggleValue(item);
                       e.preventDefault();
                       e.stopPropagation();
                     }
                   }}
                 >
                   <LuiCheckboxInput
-                    isChecked={selectedValues.includes(item.value)}
+                    isChecked={`${item.value}` in selectedValues}
                     value={`${item.value}`}
                     label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
                     inputProps={{
@@ -206,16 +212,18 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
                   />
                 </MenuItem>
 
-                {selectedValues.includes(item.value) && item.subComponent && (
+                {`${item.value}` in selectedValues && item.subComponent && (
                   <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
                     {(_: any) =>
                       item.subComponent && (
                         <GridSubComponentContext.Provider
                           value={{
-                            value: subSelectedValues[`${item.value}`],
+                            value: selectedValues[`${item.value}`],
                             setValue: (value: any) => {
-                              subSelectedValues[`${item.value}`] = value;
-                              setSubSelectedValues({ ...subSelectedValues });
+                              setSelectedValues({
+                                ...selectedValues,
+                                [`${item.value}`]: value,
+                              });
                             },
                             setValid: (valid: boolean) => {
                               subComponentIsValid.current[`${item.value}`] = valid;