@linzjs/step-ag-grid 3.0.1 → 4.0.0

package/package.json

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

package/src/components/Grid.tsx

@@ -202,7 +202,7 @@ export const Grid = (params: GridProps): JSX.Element => {
     [startCellEditing],
   );
 
-  const onCellKeyDown = useCallback(
+  const onCellKeyPress = useCallback(
     (e: CellEvent) => {
       if ((e.event as KeyboardEvent).key === "Enter") startCellEditing(e);
     },
@@ -254,7 +254,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         onFirstDataRendered={sizeColumnsToFit}
         onGridSizeChanged={sizeColumnsToFit}
         suppressClickEdit={true}
-        onCellKeyDown={onCellKeyDown}
+        onCellKeyPress={onCellKeyPress}
         onCellClicked={onCellClicked}
         onCellDoubleClicked={onCellDoubleClick}
         onCellEditingStarted={refreshSelectedRows}

package/src/components/GridCell.tsx

@@ -68,6 +68,11 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
       editable: props.editable ?? true,
       cellEditor: GenericCellEditorComponentWrapper(custom),
     }),
+    suppressKeyboardEvent: (e) => {
+      // It's important that aggrid doesn't trigger edit on enter
+      // as the incorrect selected rows will be returned
+      return e.event.key === "Enter";
+    },
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
     }),

package/src/components/GridPopoverHook.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { KeyboardEvent, KeyboardEventHandler, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "../contexts/GridContext";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "../react-menu3";
@@ -30,6 +30,79 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
     [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();
+      }
+    },
+  };
+  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 (
@@ -43,6 +116,8 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               saveButtonRef={saveButtonRef}
               menuClassName={"step-ag-grid-react-menu"}
               onClose={(event: MenuCloseEvent) => {
+                // Prevent menu from closing when modals are invoked
+                if (event.reason === "blur") return;
                 triggerSave(event.reason).then();
               }}
               viewScroll={"auto"}
@@ -76,5 +151,8 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
   return {
     popoverWrapper,
     triggerSave,
+    onlyInputKeyboardEventHandlers,
+    firstInputKeyboardEventHandlers,
+    lastInputKeyboardEventHandlers,
   };
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -10,6 +10,8 @@ import debounce from "debounce-promise";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
+import { GridSubComponentContext } from "contexts/GridSubComponentContext";
+import { ClickEvent, MenuInstance } from "../../react-menu3/types";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
   // Note the row that was clicked on will be first
@@ -69,11 +71,15 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption<ValueType>[] | null>(null);
-  const [subComponentValues, setSubComponentValues] = useState<{ optionValue: any; subComponentValue: any }[]>([]);
+  const subComponentIsValid = useRef(false);
+  const [subSelectedValue, setSubSelectedValue] = useState<any>();
+  const [selectedSubComponent, setSelectedSubComponent] = useState<any>();
 
   const selectItemHandler = useCallback(
-    async (value: ValueType, subComponentValue?: ValueType): Promise<boolean> =>
-      updateValue(async (selectedRows) => {
+    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) {
@@ -83,7 +89,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
           }
         }
         return true;
-      }),
+      });
+    },
     [field, props, updateValue],
   );
 
@@ -185,7 +192,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
     },
     [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props],
   );
-  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
+
+  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);
+    return true;
+  }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
+
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
     <>
       {props.filtered && (
@@ -223,59 +239,50 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
               <MenuHeader key={`$$header_${index}`}>{item.label}</MenuHeader>
             ) : filteredValues.includes(item.value) ? null : (
               <div key={`menu-wrapper-${index}`}>
-                {!item.subComponent ? (
-                  <MenuItem
-                    key={`${fieldToString(field)}-${index}`}
-                    disabled={!!item.disabled}
-                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                    value={item.value}
-                    onClick={() => {
+                <MenuItem
+                  key={`${fieldToString(field)}-${index}`}
+                  disabled={!!item.disabled}
+                  title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                  value={item.value}
+                  onClick={(e: ClickEvent) => {
+                    if (item.subComponent) {
+                      if (selectedSubComponent === item) {
+                        setSelectedSubComponent(null);
+                        subComponentIsValid.current = true;
+                      } else {
+                        setSelectedSubComponent(item);
+                      }
+                      e.keepOpen = true;
+                    } else {
                       selectItemHandler(item.value as ValueType).then();
-                    }}
-                  >
-                    {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                  </MenuItem>
-                ) : (
-                  <FocusableItem className={"LuiDeprecatedForms"} key={`${fieldToString(field)}-${index}_subcomponent`}>
-                    {(ref: any) =>
-                      item.subComponent && (
-                        <item.subComponent
-                          setValue={(value: any) => {
-                            const localSubComponentValues = [...subComponentValues];
-                            const subComponentValueIndex = localSubComponentValues.findIndex(
-                              ({ optionValue }) => optionValue === item.value,
-                            );
-                            if (subComponentValueIndex !== -1) {
-                              localSubComponentValues[subComponentValueIndex].subComponentValue = value;
-                            } else {
-                              localSubComponentValues.push({
-                                subComponentValue: value,
-                                optionValue: item.value,
-                              });
-                            }
-                            setSubComponentValues(localSubComponentValues);
-                          }}
-                          keyDown={(key: string, event: KeyboardEvent<HTMLInputElement>) => {
-                            const subComponentItem = subComponentValues.find(
-                              ({ optionValue }) => optionValue === item.value,
-                            );
-                            if ((key === "Enter" || key === "Tab") && subComponentItem) {
-                              event.preventDefault();
-                              event.stopPropagation();
-                              return selectItemHandler(
-                                item.value as ValueType,
-                                subComponentItem.subComponentValue,
-                              ).then(() => {
-                                ref.closeMenu();
-                                return true;
-                              });
-                            }
-                            return false;
-                          }}
-                          key={`${fieldToString(field)}-${index}_subcomponent_inner`}
-                        />
-                      )
                     }
+                  }}
+                >
+                  {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                </MenuItem>
+
+                {item.subComponent && selectedSubComponent === item && (
+                  <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                    {(ref: MenuInstance) => (
+                      <GridSubComponentContext.Provider
+                        value={{
+                          value: subSelectedValue,
+                          setValue: (value: any) => {
+                            setSubSelectedValue(value);
+                          },
+                          setValid: (valid: boolean) => {
+                            subComponentIsValid.current = valid;
+                          },
+                          triggerSave: async () => {
+                            ref.closeMenu();
+                          },
+                        }}
+                      >
+                        {item.subComponent && (
+                          <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
+                        )}
+                      </GridSubComponentContext.Provider>
+                    )}
                   </FocusableItem>
                 )}
               </div>

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -43,7 +43,10 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
     },
     [field, initialValue, props, value],
   );
-  const { triggerSave, popoverWrapper } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
+    className: props.className,
+    save,
+  });
 
   return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
@@ -52,13 +55,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         onChange={(e) => {
           setValue(e.target.value.trim());
         }}
-        inputProps={{
-          autoFocus: true,
-          placeholder: props.placeHolder,
-          disabled: false,
-          maxLength: 16,
-          onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
-        }}
+        autoFocus={true}
+        placeholder={props.placeHolder}
+        {...onlyInputKeyboardEventHandlers}
         formatted={bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
         error={bearingStringValidator(value, props.range)}
       />

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,7 +1,7 @@
 import "../../styles/GridFormMultiSelect.scss";
 
 import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
-import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay, fromPairs, isEqual, omit, pick, toPairs } from "lodash-es";
@@ -149,7 +149,10 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
     [selectedValues],
   );
 
-  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, lastInputKeyboardEventHandlers, triggerSave } = useGridPopoverHook({
+    className: props.className,
+    save,
+  });
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options} className={"GridFormMultiSelect-container"}>
       <>
@@ -186,14 +189,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
                     e.keepOpen = true;
                     toggleValue(item);
                   }}
-                  onKeyDown={async (e: KeyboardEvent) => {
-                    if (e.key === "Enter") triggerSave().then();
-                    else if (e.key === " ") {
-                      toggleValue(item);
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }
-                  }}
+                  {...lastInputKeyboardEventHandlers}
                 >
                   <LuiCheckboxInput
                     isChecked={`${item.value}` in selectedValues}

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,5 +1,5 @@
 import { GridBaseRow } from "../Grid";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
 import { useGridPopoverHook } from "../GridPopoverHook";
@@ -99,8 +99,8 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
         setSubComponentSelected(subComponentSelected === item ? null : item);
         e.keepOpen = true;
       } else {
-        setSubComponentSelected(null);
         actionClick(item).then();
+        e.keepOpen = true;
       }
     },
     [actionClick, subComponentSelected],
@@ -117,17 +117,14 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
     if (!actionProcessing.current && subComponentSelected) {
       if (!subComponentIsValid.current) return false;
       await actionClick(subComponentSelected);
+      return false;
     }
+    // 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 localTriggerSave = async (reason?: string) => {
-    if (!subComponentIsValid.current) return;
-    return triggerSave(reason);
-  };
-
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!filteredOptions} className={"GridFormPopupMenu"}>
       <>
@@ -136,7 +133,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
             <MenuDivider key={`$$divider_${index}`} />
           ) : (
             !item.hidden && (
-              <>
+              <Fragment key={`${item.label}`}>
                 <MenuItem
                   key={`${item.label}`}
                   onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
@@ -158,7 +155,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                             setValid: (valid: boolean) => {
                               subComponentIsValid.current = valid;
                             },
-                            triggerSave: localTriggerSave,
+                            triggerSave,
                           }}
                         >
                           <item.subComponent />
@@ -167,7 +164,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                     }
                   </FocusableItem>
                 )}
-              </>
+              </Fragment>
             )
           ),
         )}

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useContext, useEffect } from "react";
+import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
+import { CellEditorCommon } from "../GridCell";
+import clsx from "clsx";
+import { TextAreaInput } from "../../lui/TextAreaInput";
+import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
+
+export interface GridSubComponentTextAreaProps extends TextInputValidatorProps, CellEditorCommon {
+  placeholder?: string;
+  width?: string | number;
+  defaultValue: string;
+  className?: string;
+  helpText?: string;
+}
+
+export const GridFormSubComponentTextArea = (props: GridSubComponentTextAreaProps): JSX.Element => {
+  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+
+  const helpText = props.helpText ?? "Press tab to save";
+
+  // If is not initialised yet as it's just been created then set the default value
+  useEffect(() => {
+    if (value == null) setValue(props.defaultValue);
+  }, [props.defaultValue, setValue, value]);
+
+  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+
+  useEffect(() => {
+    setValid(value != null && invalid() == null);
+  }, [setValid, invalid, value]);
+
+  return (
+    <div className={clsx("FreeTextInput LuiDeprecatedForms", props.className)}>
+      <TextAreaInput
+        className={"free-text-input"}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        error={invalid()}
+        helpText={helpText}
+        autoFocus={true}
+        placeholder={props.placeholder}
+        onKeyDown={(e) => {
+          if (e.key === "Tab") {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }}
+        onKeyUp={(e) => {
+          if (e.key === "Tab") {
+            !e.shiftKey && triggerSave().then();
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }}
+      />
+    </div>
+  );
+};

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -1,67 +1,60 @@
-import "../../styles/GridFormSubComponentTextInput.scss";
-
-import { useState, KeyboardEvent } from "react";
+import { useCallback, useContext, useEffect } from "react";
+import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
+import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
+import { CellEditorCommon } from "../GridCell";
 
-export interface GridFormSubComponentTextInput {
-  setValue: (value: string) => void;
-  keyDown: (key: string, event: KeyboardEvent<HTMLInputElement>) => void;
+export interface GridFormSubComponentTextInputProps extends TextInputValidatorProps, CellEditorCommon {
   placeholder?: string;
-  className?: string;
-  customHelpText?: string;
+  width?: string | number;
+  defaultValue: string;
+  helpText?: string;
 }
 
-export const GridFormSubComponentTextInput = ({
-  keyDown,
-  placeholder,
-  setValue,
-  className,
-  customHelpText,
-}: GridFormSubComponentTextInput) => {
-  const placeholderText = placeholder || "Other...";
-  const helpText = customHelpText || "Press enter or tab to save";
+export const GridFormSubComponentTextInput = (props: GridFormSubComponentTextInputProps): JSX.Element => {
+  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+
+  const helpText = props.helpText ?? "Press enter or tab to save";
+
+  // If is not initialised yet as it's just been created then set the default value
+  useEffect(() => {
+    if (value == null) setValue(props.defaultValue);
+  }, [props.defaultValue, setValue, value]);
+
+  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+
+  useEffect(() => {
+    setValid(value != null && invalid() == null);
+  }, [setValid, invalid, value]);
 
-  const inputClass = className || "GridFormSubComponentTextInput-full-width-input";
-  const [inputValue, setInputValue] = useState("");
   return (
-    <div
+    <TextInputFormatted
+      value={value}
+      error={invalid()}
+      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.shiftKey && triggerSave().then();
+          e.preventDefault();
+          e.stopPropagation();
+        } else if (e.key === "Enter") {
+          triggerSave().then();
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }}
+      placeholder={props.placeholder}
       style={{
-        display: "flex",
-        flexDirection: "column",
         width: "100%",
-        padding: 0,
       }}
-    >
-      <TextInputFormatted
-        className={inputClass}
-        value={inputValue}
-        onChange={(e) => {
-          const value = e.target.value;
-          setValue(value);
-          setInputValue(value);
-        }}
-        inputProps={{
-          onKeyDown: (e) => {
-            return keyDown(e.key, e);
-          },
-          placeholder: placeholderText,
-          onMouseEnter: (e) => {
-            if (document.activeElement != e.currentTarget) {
-              e.currentTarget.focus();
-            }
-          },
-          style: {
-            width: "100%",
-          },
-        }}
-      />
-      <span
-        style={{
-          fontSize: "0.7rem",
-        }}
-      >
-        {helpText}
-      </span>
-    </div>
+    />
   );
 };

package/src/components/gridForm/GridFormTextArea.tsx

@@ -4,32 +4,22 @@ import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
+import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
 
-export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
   placeholder?: string;
-  required?: boolean;
-  maxLength?: number;
   width?: string | number;
-  validate?: (value: string) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+  helpText?: string;
 }
 
 export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
   const { field, value: initialVale } = useGridPopoverContext<RowType>();
   const [value, setValue] = useState(initialVale != null ? `${initialVale}` : "");
 
-  const invalid = useCallback(() => {
-    if (props.required && value.length == 0) {
-      return `Some text is required`;
-    }
-    if (props.maxLength && value.length > props.maxLength) {
-      return `Text must be no longer than ${props.maxLength} characters`;
-    }
-    if (props.validate) {
-      return props.validate(value);
-    }
-    return null;
-  }, [props, value]);
+  const helpText = props.helpText ?? "Press tab to save";
+
+  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
@@ -52,14 +42,16 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
     },
     [invalid, initialVale, value, props, field],
   );
-  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, lastInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        inputProps={{ placeholder: props.placeholder }}
+        placeholder={props.placeholder}
+        helpText={helpText}
+        {...lastInputKeyboardEventHandlers}
       />
     </div>,
   );