@linzjs/step-ag-grid 4.0.2 → 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.2",
+  "version": "5.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridPopoverHook.tsx

@@ -1,12 +1,14 @@
-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;
+  invalid?: () => Promise<boolean | string | null> | boolean | string | null;
   save?: (selectedRows: RowType[]) => Promise<boolean>;
 }
 
@@ -22,86 +24,31 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
 
   const triggerSave = useCallback(
     async (reason?: string) => {
-      if (reason == "cancel" || !props.save || (updateValue && (await updateValue(props.save)))) {
-        setOpen(false);
+      if (reason == "cancel") {
         stopEditing();
+        return;
       }
-    },
-    [props.save, 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();
+      if (props.invalid && props.invalid()) {
+        return;
       }
-    },
-  };
-  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();
+      if (!props.save) {
+        stopEditing();
+      } 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,
+            reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
+          )
+        ) {
+          if (!props.invalid) stopEditing();
+        }
       }
     },
-  };
+    [props, stopEditing, updateValue],
+  );
 
   const popoverWrapper = useCallback(
     (children: JSX.Element) => {
@@ -139,7 +86,14 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
                 />
               )}
               {children}
-              <button ref={saveButtonRef} onClick={() => triggerSave().then()} style={{ display: "none" }} />
+              <button
+                ref={saveButtonRef}
+                data-reason={""}
+                onClick={(e) => {
+                  triggerSave(e.currentTarget.getAttribute("data-reason") ?? undefined).then();
+                }}
+                style={{ display: "none" }}
+              />
             </ControlledMenu>
           )}
         </>
@@ -151,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,31 +65,35 @@ 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);
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption<ValueType>[] | null>(null);
   const subComponentIsValid = useRef(false);
   const [subSelectedValue, setSubSelectedValue] = useState<any>();
-  const [selectedSubComponent, setSelectedSubComponent] = useState<any>();
+  const [selectedSubComponent, setSelectedSubComponent] = useState<FinalSelectOption<any> | null>(null);
 
   const selectItemHandler = useCallback(
-    async (value: ValueType, subComponentValue?: ValueType): Promise<boolean> => {
-      if (subComponentValue !== undefined && !subComponentIsValid.current) return false;
-
-      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));
+    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 true;
-      });
+          return true;
+        },
+        reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
+      );
     },
     [field, props, updateValue],
   );
@@ -99,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],
   );
 
@@ -173,35 +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 (!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,
+  });
 
-  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
     <>
       {props.filtered && (
@@ -219,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>
             )}
@@ -247,18 +252,29 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                   onClick={(e: ClickEvent) => {
                     if (item.subComponent) {
                       if (selectedSubComponent === item) {
+                        // toggle selection off
                         setSelectedSubComponent(null);
                         subComponentIsValid.current = true;
                       } else {
+                        // toggle selection on
                         setSelectedSubComponent(item);
                       }
                       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();
                     }
                   }}
                 >
                   {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                  {item.subComponent ? "..." : ""}
                 </MenuItem>
 
                 {item.subComponent && selectedSubComponent === item && (

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -1,6 +1,6 @@
 import "../../styles/GridFormEditBearing.scss";
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
@@ -17,14 +17,21 @@ export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends C
 export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
   const { field, value: initialValue } = useGridPopoverContext<RowType>();
 
-  const [value, setValue] = useState<string>(`${initialValue ?? ""}`);
+  // This clears out any scientific precision
+  const defaultValue = useMemo(
+    () => (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()),
+    [initialValue],
+  );
+
+  const [value, setValue] = useState<string>(defaultValue);
+
+  const invalid = useCallback(() => bearingStringValidator(value, props.range), [props.range, value]);
 
   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 === initialValue) {
+      if (parsedValue === bearingNumberParser(defaultValue)) {
         return true;
       }
 
@@ -41,25 +48,26 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       }
       return true;
     },
-    [field, initialValue, props, value],
+    [defaultValue, field, props, value],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
+  const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
+    invalid,
     save,
   });
 
   return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
       <TextInputFormatted
-        value={value ?? ""}
+        value={defaultValue}
         onChange={(e) => {
           setValue(e.target.value.trim());
         }}
         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"}
       />
     </div>,
   );

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

@@ -25,8 +25,6 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      if (invalid()) return false;
-
       if (initialVale === (value ?? "")) return true;
 
       if (props.onSave) {
@@ -42,9 +40,15 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
       });
       return true;
     },
-    [invalid, initialVale, value, props, field],
+    [initialVale, value, props, field],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
+
+  const { popoverWrapper } = useGridPopoverHook({
+    className: props.className,
+    invalid,
+    save,
+  });
+
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput
@@ -53,7 +57,6 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
         error={invalid()}
         placeholder={props.placeholder}
         helpText={helpText}
-        {...onlyInputKeyboardEventHandlers}
       />
     </div>,
   );