@linzjs/step-ag-grid 4.0.3 → 5.0.0

package/package.json

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

package/src/components/GridPopoverHook.tsx

@@ -1,9 +1,10 @@
-import { KeyboardEvent, KeyboardEventHandler, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "../contexts/GridContext";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "../react-menu3";
 import { useGridPopoverContext } from "../contexts/GridPopoverContext";
 import { MenuCloseEvent } from "../react-menu3/types";
+import { CloseReason } from "../react-menu3/utils";
 
 export interface GridPopoverHookProps<RowType> {
   className: string | undefined;
@@ -36,7 +37,12 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
       } else if (props.save) {
         // forms that don't provide an invalid fn must wait until they have saved to close
         if (props.invalid) stopEditing();
-        if (await updateValue(props.save)) {
+        if (
+          await updateValue(
+            props.save,
+            reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
+          )
+        ) {
           if (!props.invalid) stopEditing();
         }
       }
@@ -44,79 +50,6 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
     [props, stopEditing, updateValue],
   );
 
-  const onlyInputKeyboardEventHandlers: {
-    onKeyUp?: KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyDown?: KeyboardEventHandler<HTMLElement> | undefined;
-  } = {
-    onKeyUp: (e: KeyboardEvent) => {
-      const isTextArea = (e.currentTarget as any).type === "textarea";
-      if (e.key === "Enter" && !isTextArea) {
-        e.preventDefault();
-        e.stopPropagation();
-        triggerSave().then();
-      } else if (e.key === "Tab") {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    onKeyDown: (e: KeyboardEvent) => {
-      const isTextArea = (e.currentTarget as any).type === "textarea";
-      if (e.key === "Enter" && !isTextArea) {
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (e.key === "Tab") {
-        e.preventDefault();
-        e.stopPropagation();
-        !e.shiftKey && triggerSave().then();
-      }
-    },
-  };
-  const firstInputKeyboardEventHandlers: {
-    onKeyUp?: KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyDown?: KeyboardEventHandler<HTMLElement> | undefined;
-  } = {
-    onKeyUp: (e: KeyboardEvent) => {
-      if (e.key === "Tab" && e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    onKeyDown: (e: KeyboardEvent) => {
-      if (e.key === "Tab" && e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-  };
-
-  const lastInputKeyboardEventHandlers: {
-    onKeyUp?: KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyDown?: KeyboardEventHandler<HTMLElement> | undefined;
-  } = {
-    onKeyUp: (e: KeyboardEvent) => {
-      const isTextArea = (e.currentTarget as any).type === "textarea";
-      if (e.key === "Enter" && !isTextArea) {
-        e.preventDefault();
-        e.stopPropagation();
-        triggerSave().then();
-      } else if (e.key === "Tab" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    onKeyDown: (e: KeyboardEvent) => {
-      const isTextArea = (e.currentTarget as any).type === "textarea";
-      if (e.key === "Enter" && !isTextArea) {
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (e.key === "Tab" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        triggerSave().then();
-      }
-    },
-  };
-
   const popoverWrapper = useCallback(
     (children: JSX.Element) => {
       return (
@@ -155,8 +88,9 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               {children}
               <button
                 ref={saveButtonRef}
-                onClick={() => {
-                  triggerSave().then();
+                data-reason={""}
+                onClick={(e) => {
+                  triggerSave(e.currentTarget.getAttribute("data-reason") ?? undefined).then();
                 }}
                 style={{ display: "none" }}
               />
@@ -171,8 +105,5 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
   return {
     popoverWrapper,
     triggerSave,
-    onlyInputKeyboardEventHandlers,
-    firstInputKeyboardEventHandlers,
-    lastInputKeyboardEventHandlers,
   };
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,10 +1,9 @@
 import "../../styles/GridFormDropDown.scss";
 
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
-import { KeyboardEvent, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, 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 } from "../GridCell";
@@ -12,6 +11,7 @@ import { useGridPopoverHook } from "../GridPopoverHook";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "contexts/GridSubComponentContext";
 import { ClickEvent, MenuInstance } from "../../react-menu3/types";
+import { CloseReason } from "../../react-menu3/utils";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
   // Note the row that was clicked on will be first
@@ -65,7 +65,6 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   props: GridFormPopoutDropDownProps<RowType, ValueType>,
 ) => {
   const { selectedRows, field, updateValue, data } = useGridPopoverContext<RowType>();
-  const { stopEditing } = useContext(GridContext);
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const hasSubmitted = useRef(false);
@@ -78,21 +77,23 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   const [selectedSubComponent, setSelectedSubComponent] = useState<FinalSelectOption<any> | null>(null);
 
   const selectItemHandler = useCallback(
-    async (value: ValueType, subComponentValue?: ValueType): Promise<boolean> => {
+    async (value: ValueType, subComponentValue?: ValueType, reason?: string): Promise<boolean> => {
       if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current)) return false;
       hasSubmitted.current = true;
-
-      return updateValue(async (selectedRows) => {
-        const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
-        if (hasChanged) {
-          if (props.onSelectedItem) {
-            await props.onSelectedItem({ selectedRows, value, subComponentValue });
-          } else {
-            selectedRows.forEach((row) => (row[field as keyof RowType] = value));
+      return updateValue(
+        async (selectedRows) => {
+          const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
+          if (hasChanged) {
+            if (props.onSelectedItem) {
+              await props.onSelectedItem({ selectedRows, value, subComponentValue });
+            } else {
+              selectedRows.forEach((row) => (row[field as keyof RowType] = value));
+            }
           }
-        }
-        return true;
-      });
+          return true;
+        },
+        reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
+      );
     },
     [field, props, updateValue],
   );
@@ -102,7 +103,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
       updateValue(async (selectedRows) => {
         props.onSelectFilter && (await props.onSelectFilter({ selectedRows, value }));
         return true;
-      }),
+      }, 0),
     [props, updateValue],
   );
 
@@ -176,39 +177,37 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
     }
   }, [filter, props, researchOnFilterChange]);
 
-  const onFilterKeyDown = useCallback(
-    async (e: KeyboardEvent) => {
-      if (!options) return;
-      if (e.key == "Enter" || e.key == "Tab") {
-        const activeOptions = options.filter((option) => !filteredValues.includes(option.value));
-        if (activeOptions.length == 1) {
-          await selectItemHandler(activeOptions[0].value);
-          stopEditing();
-        } else if (props.onSelectFilter) {
-          await selectFilterHandler(filter);
-          stopEditing();
-        } else {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }
-    },
-    [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props],
-  );
-
   const save = useCallback(async () => {
-    // Handler for sub-selected value
-    if (!selectedSubComponent) return true;
-    if (selectedSubComponent.subComponent && !subComponentIsValid.current) return false;
-    await selectItemHandler(selectedSubComponent.value as ValueType, subSelectedValue);
+    if (!options) return true;
+    const activeOptions = options.filter((option) => !filteredValues.includes(option.value));
+    if (activeOptions.length === 1) {
+      await selectItemHandler(activeOptions[0].value);
+    } else if (activeOptions.length === 0 && props.onSelectFilter) {
+      await selectFilterHandler(filter);
+    } else {
+      // Handler for sub-selected value
+      if (!selectedSubComponent) return true;
+      if (selectedSubComponent.subComponent && !subComponentIsValid.current) return false;
+      await selectItemHandler(selectedSubComponent.value as ValueType, subSelectedValue);
+    }
     return true;
-  }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
+  }, [
+    filter,
+    filteredValues,
+    options,
+    props.onSelectFilter,
+    selectFilterHandler,
+    selectItemHandler,
+    selectedSubComponent,
+    subSelectedValue,
+  ]);
 
   const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid: () => !!(selectedSubComponent && !subComponentIsValid.current),
     save,
   });
+
   return popoverWrapper(
     <>
       {props.filtered && (
@@ -226,7 +225,6 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
                   onChange={(e) => setFilter(e.target.value.toLowerCase())}
-                  onKeyDown={(e) => onFilterKeyDown(e)}
                 />
               </div>
             )}
@@ -263,7 +261,15 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                       }
                       e.keepOpen = true;
                     } else {
-                      selectItemHandler(item.value as ValueType).then();
+                      selectItemHandler(
+                        item.value as ValueType,
+                        undefined,
+                        e.key === "Tab"
+                          ? e.shiftKey
+                            ? CloseReason.TAB_BACKWARD
+                            : CloseReason.TAB_FORWARD
+                          : CloseReason.CLICK,
+                      ).then();
                     }
                   }}
                 >

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -50,7 +50,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
     },
     [defaultValue, field, props, value],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
+  const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid,
     save,
@@ -65,7 +65,6 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         }}
         autoFocus={true}
         placeholder={props.placeHolder}
-        {...onlyInputKeyboardEventHandlers}
         formatted={bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
         error={bearingStringValidator(value, props.range)}
         helpText={"Press enter or tab to save"}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -61,6 +61,11 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MultiFinalSelectOption<ValueType>[]>();
 
+  const invalid = useCallback(() => {
+    const validations = pick(subComponentIsValid.current, Object.keys(selectedValues));
+    return Object.values(validations).some((v) => !v);
+  }, [selectedValues]);
+
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (props.onSave) {
@@ -149,8 +154,9 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
     [selectedValues],
   );
 
-  const { popoverWrapper, lastInputKeyboardEventHandlers, triggerSave } = useGridPopoverHook({
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({
     className: props.className,
+    invalid,
     save,
   });
   return popoverWrapper(
@@ -186,10 +192,12 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
               <div key={`${index}`}>
                 <MenuItem
                   onClick={(e: ClickEvent) => {
-                    e.keepOpen = true;
-                    toggleValue(item);
+                    // Global react-menu MenuItem handler handles tabs
+                    if (e.key !== "Tab") {
+                      e.keepOpen = true;
+                      toggleValue(item);
+                    }
                   }}
-                  {...lastInputKeyboardEventHandlers}
                 >
                   <LuiCheckboxInput
                     isChecked={`${item.value}` in selectedValues}

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -7,6 +7,7 @@ import { CellEditorCommon } from "../GridCell";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { ClickEvent } from "../../react-menu3/types";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
+import { CloseReason } from "../../react-menu3/utils";
 
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
@@ -28,7 +29,6 @@ export interface MenuOption<RowType extends GridBaseRow> {
   label: JSX.Element | string | MenuSeparatorType;
   action?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
   disabled?: string | boolean;
-  supportsMultiEdit: boolean;
   hidden?: boolean;
   subComponent?: (props: any) => JSX.Element;
 }
@@ -79,54 +79,57 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   }, [options, props.defaultAction, props.options, selectedRows]);
 
   const actionClick = useCallback(
-    async (menuOption: MenuOption<RowType>) => {
+    async (menuOption: MenuOption<RowType>, reason: string) => {
       actionProcessing.current = true;
-      return updateValue(async () => {
-        const result = { ...menuOption, subValue: subSelectedValue };
-        await (menuOption.action ?? defaultAction)(selectedRows, result);
-        actionProcessing.current = false;
-        return true;
-      });
+      return updateValue(
+        async () => {
+          const result = { ...menuOption, subValue: subSelectedValue };
+          await (menuOption.action ?? defaultAction)(selectedRows, result);
+          actionProcessing.current = false;
+          return true;
+        },
+        reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
+      );
     },
     [defaultAction, selectedRows, subSelectedValue, updateValue],
   );
 
   const onMenuItemClick = useCallback(
-    (e: ClickEvent, item: MenuOption<RowType>) => {
+    async (e: ClickEvent, item: MenuOption<RowType>) => {
       if (item.subComponent) {
         subComponentIsValid.current = false;
         setSubSelectedValue(null);
         setSubComponentSelected(subComponentSelected === item ? null : item);
         e.keepOpen = true;
       } else {
-        actionClick(item).then();
-        e.keepOpen = true;
+        await actionClick(
+          item,
+          e.key === "Tab" ? (e.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD) : CloseReason.CLICK,
+        ).then();
       }
     },
     [actionClick, subComponentSelected],
   );
 
-  const selectedRowCount = selectedRows.length;
-
-  const filteredOptions = options?.filter((menuOption) => {
-    return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
-  });
-
   const save = useCallback(async () => {
     // if a subcomponent is open we assume that it's meant to be saved.
     if (!actionProcessing.current && subComponentSelected) {
       if (!subComponentIsValid.current) return false;
-      await actionClick(subComponentSelected);
-      return false;
+      await actionClick(subComponentSelected, "click");
+      return true;
     }
     // Otherwise assume it's a cancel, either way we close the menu
     return true;
   }, [actionClick, subComponentSelected]);
 
-  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({
+    className: props.className,
+    invalid: () => subComponentSelected && !subComponentIsValid.current,
+    save,
+  });
 
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={!filteredOptions} className={"GridFormPopupMenu"}>
+    <ComponentLoadingWrapper loading={!options} className={"GridFormPopupMenu"}>
       <>
         {options?.map((item, index) =>
           item.label === PopoutMenuSeparator ? (
@@ -137,7 +140,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                 <MenuItem
                   key={`${item.label}`}
                   onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
-                  disabled={!!item.disabled || !filteredOptions?.includes(item)}
+                  disabled={!!item.disabled}
                   title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                 >
                   {item.label as JSX.Element | string}

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -19,7 +19,7 @@ export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow>
 export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
   props: GridSubComponentTextAreaProps<RowType>,
 ): JSX.Element => {
-  const { value, data, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+  const { value, data, setValue, setValid } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press tab to save";
 
@@ -44,19 +44,6 @@ export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
         helpText={helpText}
         autoFocus={true}
         placeholder={props.placeholder}
-        onKeyDown={(e) => {
-          if (e.key === "Tab") {
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        }}
-        onKeyUp={(e) => {
-          if (e.key === "Tab") {
-            e.preventDefault();
-            e.stopPropagation();
-            !e.shiftKey && triggerSave().then();
-          }
-        }}
       />
     </div>
   );

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -17,7 +17,7 @@ export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow>
 export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
   props: GridFormSubComponentTextInputProps<RowType>,
 ): JSX.Element => {
-  const { value, setValue, setValid, triggerSave, data } = useContext(GridSubComponentContext);
+  const { value, setValue, setValid, data } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press enter or tab to save";
 
@@ -39,23 +39,6 @@ export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
       onChange={(e) => setValue(e.target.value)}
       helpText={helpText}
       autoFocus={true}
-      onKeyDown={(e) => {
-        if (e.key === "Tab" || e.key === "Enter") {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }}
-      onKeyUp={(e) => {
-        if (e.key === "Tab") {
-          e.preventDefault();
-          e.stopPropagation();
-          !e.shiftKey && triggerSave().then();
-        } else if (e.key === "Enter") {
-          triggerSave().then();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }}
       placeholder={props.placeholder}
       style={{
         width: "100%",

package/src/components/gridForm/GridFormTextArea.tsx

@@ -42,11 +42,13 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
     },
     [initialVale, value, props, field],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
+
+  const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid,
     save,
   });
+
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput
@@ -55,7 +57,6 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
         error={invalid()}
         placeholder={props.placeholder}
         helpText={helpText}
-        {...onlyInputKeyboardEventHandlers}
       />
     </div>,
   );

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,11 +1,10 @@
-import { useCallback, useContext, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
-import { GridContext } from "../../contexts/GridContext";
 
 export interface GridFormTextInputProps<RowType extends GridBaseRow>
   extends TextInputValidatorProps<RowType>,
@@ -18,7 +17,6 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow>
 }
 
 export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTextInputProps<RowType>) => {
-  const { stopEditing } = useContext(GridContext);
   const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
 
   const helpText = props.helpText ?? "Press enter or tab to save";
@@ -31,7 +29,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (invalid()) return false;
-      stopEditing();
+
       const trimmedValue = value.trim();
       if (initValue === trimmedValue) return true;
 
@@ -48,9 +46,9 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
       });
       return true;
     },
-    [invalid, stopEditing, value, initValue, props, field],
+    [invalid, value, initValue, props, field],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
+  const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid,
     save,
@@ -65,7 +63,6 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
         formatted={props.units}
         style={{ width: "100%" }}
         placeholder={props.placeholder}
-        {...onlyInputKeyboardEventHandlers}
         helpText={helpText}
       />
     </div>,

package/src/contexts/GridContext.tsx

@@ -25,6 +25,7 @@ export interface GridContextType {
     setSaving?: (saving: boolean) => void,
   ) => Promise<boolean>;
   redrawRows: (rowNodes?: RowNode[]) => void;
+  selectNextCell: (tabDirection: -1 | 0 | 1) => void;
 }
 
 export const GridContext = createContext<GridContextType>({
@@ -87,4 +88,7 @@ export const GridContext = createContext<GridContextType>({
   redrawRows: () => {
     console.error("no context provider for redrawRows");
   },
+  selectNextCell: () => {
+    console.error("no context provider for selectNextCell");
+  },
 });

package/src/contexts/GridContextProvider.tsx

@@ -275,6 +275,13 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   };
 
+  const selectNextCell = (tabDirection: -1 | 0 | 1 = 0) => {
+    gridApiOp((gridApi) => {
+      if (tabDirection == 1) gridApi.tabToNextCell();
+      if (tabDirection == -1) gridApi.tabToPreviousCell();
+    });
+  };
+
   return (
     <GridContext.Provider
       value={{
@@ -296,6 +303,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         stopEditing,
         updatingCells,
         redrawRows,
+        selectNextCell,
       }}
     >
       {props.children}

package/src/contexts/GridPopoverContext.tsx

@@ -17,7 +17,7 @@ export interface GridPopoverContextType<RowType extends GridBaseRow> {
   value: any;
   data: RowType;
   selectedRows: RowType[];
-  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
+  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1) => Promise<boolean>;
 }
 
 export const GridPopoverContext = createContext<GridPopoverContextType<any>>({

package/src/contexts/GridPopoverContextProvider.tsx

@@ -11,7 +11,7 @@ interface GridPopoverContextProps {
 }
 
 export const GridPopoverContextProvider = ({ props, children }: GridPopoverContextProps) => {
-  const { getSelectedRows, updatingCells, stopEditing } = useContext(GridContext);
+  const { getSelectedRows, updatingCells, stopEditing, selectNextCell } = useContext(GridContext);
   const anchorRef = useRef<Element>(props.eGridCell);
 
   const [saving, setSaving] = useState(false);
@@ -27,16 +27,19 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
   const field = props.colDef?.field ?? "";
 
   const updateValue = useCallback(
-    async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
+    async (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1): Promise<boolean> => {
       let result = false;
       if (!saving) {
         result = await updatingCells({ selectedRows, field }, saveFn, setSaving);
-        if (result) stopEditing();
+        if (result) {
+          stopEditing();
+          tabDirection && selectNextCell(tabDirection);
+        }
       }
 
       return result;
     },
-    [field, saving, selectedRows, stopEditing, updatingCells],
+    [field, saving, selectNextCell, selectedRows, stopEditing, updatingCells],
   );
 
   return (