@linzjs/step-ag-grid 4.0.2 → 5.0.0

package/dist/index.js

@@ -71,6 +71,7 @@ var subMenuClass = "submenu";
 var radioGroupClass = "radio-group";
 var Keys = Object.freeze({
     ENTER: "Enter",
+    TAB: "Tab",
     ESC: "Escape",
     SPACE: " ",
     HOME: "Home",
@@ -94,7 +95,9 @@ var CloseReason = Object.freeze({
     CLICK: "click",
     CANCEL: "cancel",
     BLUR: "blur",
-    SCROLL: "scroll"
+    SCROLL: "scroll",
+    TAB_FORWARD: "tab_forward",
+    TAB_BACKWARD: "tab_backward"
 });
 var FocusPositions = Object.freeze({
     FIRST: "first",
@@ -1366,14 +1369,120 @@ var ControlledMenuFr = function (_a, externalRef) {
             ev.stopPropagation();
         }
     }, [isWithinMenu]);
+    var lastTabDownEl = react.useRef();
+    var lastEnterDownEl = react.useRef();
+    var handleKeyboardTabAndEnter = react.useCallback(function (isDown) { return function (ev) {
+        var thisDocument = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
+        var activeElement = thisDocument.activeElement;
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) || !activeElement)
+            return;
+        if (ev.key !== "Tab" && ev.key !== "Enter")
+            return;
+        if (ev.repeat) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            return;
+        }
+        var inputElsIterator = thisDocument.querySelectorAll(".szh-menu--state-open input,textarea");
+        var inputEls = [];
+        inputElsIterator.forEach(function (el) { return inputEls.push(el); });
+        inputEls = inputEls.filter(function (el) { return !el.disabled; });
+        if (inputEls.length === 0)
+            return;
+        var firstInputEl = inputEls[0];
+        var lastInputEl = inputEls[inputEls.length - 1];
+        if (activeElement !== firstInputEl && activeElement !== lastInputEl)
+            return;
+        var suppressAutoSaveEvents = activeElement.getAttribute("data-suppressAutoSaveEvents");
+        var invokeSave = function (reason) {
+            var _a, _b;
+            if (!(saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current) || suppressAutoSaveEvents)
+                return;
+            (_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-reason", reason);
+            (_b = saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
+        };
+        var isTextArea = activeElement.nodeName === "TEXTAREA";
+        switch (activeElement.nodeName) {
+            case "TEXTAREA":
+            case "INPUT": {
+                if (activeElement === lastInputEl && activeElement === firstInputEl) {
+                    if (ev.key === "Tab") {
+                        // Can't forward/backwards tab out of popup
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastTabDownEl.current = activeElement;
+                        }
+                        else {
+                            lastTabDownEl.current == activeElement &&
+                                invokeSave(ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD);
+                        }
+                    }
+                    if (ev.key === "Enter" && !isTextArea) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastEnterDownEl.current = activeElement;
+                        }
+                        else {
+                            lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+                        }
+                    }
+                }
+                else if (activeElement === lastInputEl) {
+                    if (ev.key === "Tab" && !ev.shiftKey) {
+                        // Can't backward tab out of popup
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastTabDownEl.current = activeElement;
+                        }
+                        else {
+                            lastTabDownEl.current == activeElement && invokeSave(CloseReason.TAB_FORWARD);
+                        }
+                    }
+                    if (ev.key === "Enter" && !isTextArea) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastEnterDownEl.current = activeElement;
+                        }
+                        else {
+                            lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+                        }
+                    }
+                }
+                else if (activeElement === firstInputEl) {
+                    if (ev.key === "Tab" && ev.shiftKey) {
+                        // Can't backward tab out of popup
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastTabDownEl.current = activeElement;
+                        }
+                        else {
+                            lastTabDownEl.current == activeElement && invokeSave(CloseReason.TAB_BACKWARD);
+                        }
+                    }
+                }
+                break;
+            }
+        }
+    }; }, [anchorRef, saveButtonRef]);
+    var handleKeydownTabAndEnter = react.useMemo(function () { return handleKeyboardTabAndEnter(true); }, [handleKeyboardTabAndEnter]);
+    var handleKeyupTabAndEnter = react.useMemo(function () { return handleKeyboardTabAndEnter(false); }, [handleKeyboardTabAndEnter]);
     react.useEffect(function () {
         if (isMenuOpen(state)) {
             var thisDocument_1 = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
+            thisDocument_1.addEventListener("keydown", handleKeydownTabAndEnter, true);
+            thisDocument_1.addEventListener("keyup", handleKeyupTabAndEnter, true);
             thisDocument_1.addEventListener("mousedown", handleScreenEventForSave, true);
             thisDocument_1.addEventListener("mouseup", handleScreenEventForCancel, true);
             thisDocument_1.addEventListener("click", handleScreenEventForCancel, true);
             thisDocument_1.addEventListener("dblclick", handleScreenEventForCancel, true);
             return function () {
+                thisDocument_1.addEventListener("keydown", handleKeydownTabAndEnter, true);
+                thisDocument_1.addEventListener("keyup", handleKeyupTabAndEnter, true);
                 thisDocument_1.removeEventListener("mousedown", handleScreenEventForSave, true);
                 thisDocument_1.removeEventListener("mouseup", handleScreenEventForCancel, true);
                 thisDocument_1.removeEventListener("click", handleScreenEventForCancel, true);
@@ -1381,7 +1490,14 @@ var ControlledMenuFr = function (_a, externalRef) {
             };
         }
         return function () { };
-    }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
+    }, [
+        handleScreenEventForSave,
+        handleScreenEventForCancel,
+        state,
+        anchorRef,
+        handleKeydownTabAndEnter,
+        handleKeyupTabAndEnter,
+    ]);
     var itemSettings = react.useMemo(function () { return ({
         submenuOpenDelay: submenuOpenDelay,
         submenuCloseDelay: submenuCloseDelay
@@ -1676,8 +1792,11 @@ var MenuItemFr = function (_a) {
             value: value,
             syntheticEvent: e
         };
-        if (e.key !== undefined)
-            event.key = e.key;
+        if (e.key !== undefined) {
+            var ke = e;
+            event.key = ke.key;
+            event.shiftKey = ke.shiftKey;
+        }
         if (isCheckBox)
             event.checked = !isChecked;
         if (isRadio)
@@ -1687,6 +1806,13 @@ var MenuItemFr = function (_a) {
             safeCall(radioGroup.onRadioChange, event);
         eventHandlers.handleClick(event, isCheckBox || isRadio);
     };
+    var handleKeyDown = function (e) {
+        // if tab is allowed the handleKeyUp event can't process the tab
+        if (e.key === "Tab") {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
     /**
      * Keyboard events are triggered on up, otherwise sub-components get spaces and enters typed in them
      */
@@ -1695,7 +1821,10 @@ var MenuItemFr = function (_a) {
             return;
         switch (e.key) {
             case Keys.ENTER:
+            case Keys.TAB:
             case Keys.SPACE:
+                e.preventDefault();
+                e.stopPropagation();
                 if (isAnchor) {
                     (menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current) && menuItemRef.current.click();
                 }
@@ -1712,7 +1841,7 @@ var MenuItemFr = function (_a) {
         checked: isChecked,
         anchor: isAnchor
     }); }, [type, isDisabled, isHovering, isChecked, isAnchor]);
-    var mergedProps = mergeProps(__assign(__assign({}, restStateProps), { onPointerDown: setHover, onKeyUp: handleKeyUp, onClick: handleClick }), restProps);
+    var mergedProps = mergeProps(__assign(__assign({}, restStateProps), { onPointerDown: setHover, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick }), restProps);
     // Order of props overriding (same in all components):
     // 1. Preset props adhering to WAI-ARIA Authoring Practices.
     // 2. Merged outer and local props
@@ -1857,6 +1986,9 @@ var GridContext = react.createContext({
     }); },
     redrawRows: function () {
         console.error("no context provider for redrawRows");
+    },
+    selectNextCell: function () {
+        console.error("no context provider for selectNextCell");
     }
 });
 
@@ -1870,7 +2002,8 @@ var GridUpdatingContext = react.createContext({
             console.error("Missing GridUpdatingContext");
             return [2 /*return*/];
         });
-    }); }
+    }); },
+    updatedDep: 0
 });
 
 /**
@@ -2130,6 +2263,15 @@ var GridContextProvider = function (props) {
             gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
         });
     };
+    var selectNextCell = function (tabDirection) {
+        if (tabDirection === void 0) { tabDirection = 0; }
+        gridApiOp(function (gridApi) {
+            if (tabDirection == 1)
+                gridApi.tabToNextCell();
+            if (tabDirection == -1)
+                gridApi.tabToPreviousCell();
+        });
+    };
     return (jsxRuntime.jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2148,34 +2290,42 @@ var GridContextProvider = function (props) {
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
             updatingCells: updatingCells,
-            redrawRows: redrawRows
+            redrawRows: redrawRows,
+            selectNextCell: selectNextCell
         } }, { children: props.children })));
 };
 
 var GridUpdatingContextProvider = function (props) {
     var updatingBlocks = react.useRef({});
     var updating = react.useRef({});
+    var _a = react.useState(0), updatedDep = _a[0], setUpdatedDep = _a[1];
     var resetUpdating = function () {
         var mergedUpdatingBlocks = {};
         for (var key in updatingBlocks.current) {
             mergedUpdatingBlocks[key] = lodashEs.flatten(updatingBlocks.current[key]);
         }
         updating.current = mergedUpdatingBlocks;
+        setUpdatedDep(function (updatedDep) { return updatedDep + 1; });
     };
-    var modifyUpdating = function (field, ids, fn) { return __awaiter(void 0, void 0, void 0, function () {
-        var fieldUpdatingIds, idRef;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+    var modifyUpdating = function (fields, ids, fn) { return __awaiter(void 0, void 0, void 0, function () {
+        var idRef;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
-                    fieldUpdatingIds = (_a = updatingBlocks.current[field]) !== null && _a !== void 0 ? _a : (updatingBlocks.current[field] = []);
                     idRef = __spreadArray([], ids, true);
-                    fieldUpdatingIds.push(idRef);
+                    lodashEs.castArray(fields).forEach(function (field) {
+                        var _a;
+                        var fieldUpdatingIds = (_a = updatingBlocks.current[field]) !== null && _a !== void 0 ? _a : (updatingBlocks.current[field] = []);
+                        fieldUpdatingIds.push(idRef);
+                    });
                     resetUpdating();
                     return [4 /*yield*/, fn()];
                 case 1:
-                    _b.sent();
-                    lodashEs.remove(fieldUpdatingIds, function (idList) { return idList === idRef; });
+                    _a.sent();
+                    lodashEs.castArray(fields).forEach(function (field) {
+                        var fieldUpdatingIds = updatingBlocks.current[field];
+                        lodashEs.remove(fieldUpdatingIds, function (idList) { return idList === idRef; });
+                    });
                     resetUpdating();
                     return [2 /*return*/];
             }
@@ -2184,7 +2334,7 @@ var GridUpdatingContextProvider = function (props) {
     var checkUpdating = function (fields, id) {
         return lodashEs.castArray(fields).some(function (f) { var _a; return (_a = updating.current[f]) === null || _a === void 0 ? void 0 : _a.includes(id); });
     };
-    return (jsxRuntime.jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating } }, { children: props.children })));
+    return (jsxRuntime.jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating, updatedDep: updatedDep } }, { children: props.children })));
 };
 
 var GridPopoverContext = react.createContext({
@@ -2206,7 +2356,7 @@ var useGridPopoverContext = function () {
 var GridPopoverContextProvider = function (_a) {
     var _b, _c, _d;
     var props = _a.props, children = _a.children;
-    var _e = react.useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells, stopEditing = _e.stopEditing;
+    var _e = react.useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells, stopEditing = _e.stopEditing, selectNextCell = _e.selectNextCell;
     var anchorRef = react.useRef(props.eGridCell);
     var _f = react.useState(false), saving = _f[0], setSaving = _f[1];
     var colDef = props.colDef;
@@ -2215,7 +2365,7 @@ var GridPopoverContextProvider = function (_a) {
     // Then item that is clicked on will always be first in the list
     var selectedRows = react.useMemo(function () { return (multiEdit ? lodashEs.sortBy(getSelectedRows(), function (row) { return row.id !== props.data.id; }) : [props.data]); }, [getSelectedRows, multiEdit, props.data]);
     var field = (_d = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.field) !== null && _d !== void 0 ? _d : "";
-    var updateValue = react.useCallback(function (saveFn) { return __awaiter(void 0, void 0, void 0, function () {
+    var updateValue = react.useCallback(function (saveFn, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         var result;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2225,13 +2375,15 @@ var GridPopoverContextProvider = function (_a) {
                     return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving)];
                 case 1:
                     result = _a.sent();
-                    if (result)
+                    if (result) {
                         stopEditing();
+                        tabDirection && selectNextCell(tabDirection);
+                    }
                     _a.label = 2;
                 case 2: return [2 /*return*/, result];
             }
         });
-    }); }, [field, saving, selectedRows, stopEditing, updatingCells]);
+    }); }, [field, saving, selectNextCell, selectedRows, stopEditing, updatingCells]);
     return (jsxRuntime.jsx(GridPopoverContext.Provider, __assign({ value: {
             anchorRef: anchorRef,
             saving: saving,
@@ -2261,43 +2413,7 @@ var GridSubComponentContext = react.createContext({
     }); }
 });
 
-function toVal(mix) {
-	var k, y, str='';
-	if (mix) {
-		if (typeof mix === 'object') {
-			if (Array.isArray(mix)) {
-				for (k=0; k < mix.length; k++) {
-					if (mix[k] && (y = toVal(mix[k]))) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			} else {
-				for (k in mix) {
-					if (mix[k] && (y = toVal(k))) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else if (typeof mix !== 'boolean' && !mix.call) {
-			str && (str += ' ');
-			str += mix;
-		}
-	}
-	return str;
-}
-
-function clsx () {
-	var i=0, x, str='';
-	while (i < arguments.length) {
-		if (x = toVal(arguments[i++])) {
-			str && (str += ' ');
-			str += x;
-		}
-	}
-	return str;
-}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 /**
  * Retains last sort order from via <AgGrid postRowSort>.
@@ -2796,96 +2912,35 @@ var useGridPopoverHook = function (props) {
         setOpen(true);
     }, []);
     var triggerSave = react.useCallback(function (reason) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
-                    _a = reason == "cancel" || !props.save;
-                    if (_a) return [3 /*break*/, 3];
-                    _b = updateValue;
-                    if (!_b) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updateValue(props.save)];
+                    if (reason == "cancel") {
+                        stopEditing();
+                        return [2 /*return*/];
+                    }
+                    if (props.invalid && props.invalid()) {
+                        return [2 /*return*/];
+                    }
+                    if (!!props.save) return [3 /*break*/, 1];
+                    stopEditing();
+                    return [3 /*break*/, 3];
                 case 1:
-                    _b = (_c.sent());
-                    _c.label = 2;
-                case 2:
-                    _a = (_b);
-                    _c.label = 3;
-                case 3:
-                    if (_a) {
-                        setOpen(false);
+                    if (!props.save) return [3 /*break*/, 3];
+                    // forms that don't provide an invalid fn must wait until they have saved to close
+                    if (props.invalid)
                         stopEditing();
+                    return [4 /*yield*/, updateValue(props.save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
+                case 2:
+                    if (_a.sent()) {
+                        if (!props.invalid)
+                            stopEditing();
                     }
-                    return [2 /*return*/];
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
             }
         });
-    }); }, [props.save, stopEditing, updateValue]);
-    var onlyInputKeyboardEventHandlers = {
-        onKeyUp: function (e) {
-            var isTextArea = e.currentTarget.type === "textarea";
-            if (e.key === "Enter" && !isTextArea) {
-                e.preventDefault();
-                e.stopPropagation();
-                triggerSave().then();
-            }
-            else if (e.key === "Tab") {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        },
-        onKeyDown: function (e) {
-            var isTextArea = e.currentTarget.type === "textarea";
-            if (e.key === "Enter" && !isTextArea) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            else if (e.key === "Tab") {
-                e.preventDefault();
-                e.stopPropagation();
-                !e.shiftKey && triggerSave().then();
-            }
-        }
-    };
-    var firstInputKeyboardEventHandlers = {
-        onKeyUp: function (e) {
-            if (e.key === "Tab" && e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        },
-        onKeyDown: function (e) {
-            if (e.key === "Tab" && e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-    };
-    var lastInputKeyboardEventHandlers = {
-        onKeyUp: function (e) {
-            var isTextArea = e.currentTarget.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: function (e) {
-            var isTextArea = e.currentTarget.type === "textarea";
-            if (e.key === "Enter" && !isTextArea) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            else if (e.key === "Tab" && !e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-                triggerSave().then();
-            }
-        }
-    };
+    }); }, [props, stopEditing, updateValue]);
     var popoverWrapper = react.useCallback(function (children) {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
                     // Prevent menu from closing when modals are invoked
@@ -2901,14 +2956,14 @@ var useGridPopoverHook = function (props) {
                             right: 0,
                             backgroundColor: "rgba(64,64,64,0.1)",
                             zIndex: 1000
-                        } })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, onClick: function () { return triggerSave().then(); }, style: { display: "none" } })] }))) }));
+                        } })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, "data-reason": "", onClick: function (e) {
+                            var _a;
+                            triggerSave((_a = e.currentTarget.getAttribute("data-reason")) !== null && _a !== void 0 ? _a : undefined).then();
+                        }, style: { display: "none" } })] }))) }));
     }, [anchorRef, isOpen, props.className, saving, triggerSave]);
     return {
         popoverWrapper: popoverWrapper,
-        triggerSave: triggerSave,
-        onlyInputKeyboardEventHandlers: onlyInputKeyboardEventHandlers,
-        firstInputKeyboardEventHandlers: firstInputKeyboardEventHandlers,
-        lastInputKeyboardEventHandlers: lastInputKeyboardEventHandlers
+        triggerSave: triggerSave
     };
 };
 
@@ -2934,7 +2989,7 @@ var GridRenderPopoutMenuCell = function (props) {
 var css_248z$5 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
 styleInject(css_248z$5);
 
-var css_248z$4 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
+var css_248z$4 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:220px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
 styleInject(css_248z$4);
 
 /* global setTimeout, clearTimeout */
@@ -3019,18 +3074,20 @@ var fieldToString = function (field) {
 };
 var GridFormDropDown = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
-    var stopEditing = react.useContext(GridContext).stopEditing;
+    // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
+    var hasSubmitted = react.useRef(false);
     var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
     var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = react.useRef(false);
     var _d = react.useState(null), options = _d[0], setOptions = _d[1];
     var subComponentIsValid = react.useRef(false);
     var _e = react.useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
-    var _f = react.useState(), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
-    var selectItemHandler = react.useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
+    var _f = react.useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
+    var selectItemHandler = react.useCallback(function (value, subComponentValue, reason) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            if (subComponentValue !== undefined && !subComponentIsValid.current)
+            if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current))
                 return [2 /*return*/, false];
+            hasSubmitted.current = true;
             return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
                     var hasChanged;
                     return __generator(this, function (_a) {
@@ -3049,7 +3106,7 @@ var GridFormDropDown = function (props) {
                             case 3: return [2 /*return*/, true];
                         }
                     });
-                }); })];
+                }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
         });
     }); }, [field, props, updateValue]);
     var selectFilterHandler = react.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3069,7 +3126,7 @@ var GridFormDropDown = function (props) {
                                 return [2 /*return*/, true];
                         }
                     });
-                }); })];
+                }); }, 0)];
         });
     }); }, [props, updateValue]);
     // Load up options list if it's async function
@@ -3143,74 +3200,80 @@ var GridFormDropDown = function (props) {
             researchOnFilterChange().then();
         }
     }, [filter, props, researchOnFilterChange]);
-    var onFilterKeyDown = react.useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+    var save = react.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var activeOptions;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!options)
-                        return [2 /*return*/];
-                    if (!(e.key == "Enter" || e.key == "Tab")) return [3 /*break*/, 5];
+                        return [2 /*return*/, true];
                     activeOptions = options.filter(function (option) { return !filteredValues.includes(option.value); });
-                    if (!(activeOptions.length == 1)) return [3 /*break*/, 2];
+                    if (!(activeOptions.length === 1)) return [3 /*break*/, 2];
                     return [4 /*yield*/, selectItemHandler(activeOptions[0].value)];
                 case 1:
                     _a.sent();
-                    stopEditing();
-                    return [3 /*break*/, 5];
+                    return [3 /*break*/, 6];
                 case 2:
-                    if (!props.onSelectFilter) return [3 /*break*/, 4];
+                    if (!(activeOptions.length === 0 && props.onSelectFilter)) return [3 /*break*/, 4];
                     return [4 /*yield*/, selectFilterHandler(filter)];
                 case 3:
                     _a.sent();
-                    stopEditing();
-                    return [3 /*break*/, 5];
+                    return [3 /*break*/, 6];
                 case 4:
-                    e.preventDefault();
-                    e.stopPropagation();
-                    _a.label = 5;
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props]);
-    var save = react.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
                     // Handler for sub-selected value
                     if (!selectedSubComponent)
                         return [2 /*return*/, true];
-                    if (!subComponentIsValid.current)
+                    if (selectedSubComponent.subComponent && !subComponentIsValid.current)
                         return [2 /*return*/, false];
                     return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
-                case 1:
+                case 5:
                     _a.sent();
-                    return [2 /*return*/, true];
+                    _a.label = 6;
+                case 6: return [2 /*return*/, true];
             }
         });
-    }); }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
-    var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
+    }); }, [
+        filter,
+        filteredValues,
+        options,
+        props.onSelectFilter,
+        selectFilterHandler,
+        selectItemHandler,
+        selectedSubComponent,
+        subSelectedValue,
+    ]);
+    var popoverWrapper = useGridPopoverHook({
+        className: props.className,
+        invalid: function () { return !!(selectedSubComponent && !subComponentIsValid.current); },
+        save: save
+    }).popoverWrapper;
     return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
-                            return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
+                            return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); } }) })));
                         } })), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] }))), jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsxRuntime.jsx(MenuItem, { children: "[Empty]" }, "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
-                            return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
+                            return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
                                             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).then();
+                                                selectItemHandler(item.value, undefined, e.key === "Tab"
+                                                    ? e.shiftKey
+                                                        ? CloseReason.TAB_BACKWARD
+                                                        : CloseReason.TAB_FORWARD
+                                                    : CloseReason.CLICK).then();
                                             }
-                                        } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 data: data,
                                                 value: subSelectedValue,
                                                 setValue: function (value) {
@@ -3242,6 +3305,10 @@ var GridFormMultiSelect = function (props) {
     var _d = react.useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
     var optionsInitialising = react.useRef(false);
     var _e = react.useState(), options = _e[0], setOptions = _e[1];
+    var invalid = react.useCallback(function () {
+        var validations = lodashEs.pick(subComponentIsValid.current, Object.keys(selectedValues));
+        return Object.values(validations).some(function (v) { return !v; });
+    }, [selectedValues]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var validations, notValid, menuOptionSubValueResult;
         return __generator(this, function (_a) {
@@ -3335,8 +3402,9 @@ var GridFormMultiSelect = function (props) {
     }, [selectedValues]);
     var _f = useGridPopoverHook({
         className: props.className,
+        invalid: invalid,
         save: save
-    }), popoverWrapper = _f.popoverWrapper, lastInputKeyboardEventHandlers = _f.lastInputKeyboardEventHandlers, triggerSave = _f.triggerSave;
+    }), popoverWrapper = _f.popoverWrapper, triggerSave = _f.triggerSave;
     return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && props.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                                 var _b;
                                 var ref = _a.ref;
@@ -3344,9 +3412,12 @@ var GridFormMultiSelect = function (props) {
                             } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] })), jsxRuntime.jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                         var _a;
                         return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
-                                        e.keepOpen = true;
-                                        toggleValue(item);
-                                    } }, lastInputKeyboardEventHandlers, { children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: "".concat(item.value) in selectedValues, value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
+                                        // Global react-menu MenuItem handler handles tabs
+                                        if (e.key !== "Tab") {
+                                            e.keepOpen = true;
+                                            toggleValue(item);
+                                        }
+                                    } }, { children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: "".concat(item.value) in selectedValues, value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
                                             onClick: function (e) {
                                                 e.preventDefault();
                                                 e.stopPropagation();
@@ -3446,7 +3517,7 @@ var GridFormPopoverMenu = function (props) {
             });
         }); })();
     }, [options, props.defaultAction, props.options, selectedRows]);
-    var actionClick = react.useCallback(function (menuOption) { return __awaiter(void 0, void 0, void 0, function () {
+    var actionClick = react.useCallback(function (menuOption, reason) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             actionProcessing.current = true;
             return [2 /*return*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -3463,25 +3534,27 @@ var GridFormPopoverMenu = function (props) {
                                 return [2 /*return*/, true];
                         }
                     });
-                }); })];
+                }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
         });
     }); }, [defaultAction, selectedRows, subSelectedValue, updateValue]);
-    var onMenuItemClick = react.useCallback(function (e, item) {
-        if (item.subComponent) {
-            subComponentIsValid.current = false;
-            setSubSelectedValue(null);
-            setSubComponentSelected(subComponentSelected === item ? null : item);
-            e.keepOpen = true;
-        }
-        else {
-            actionClick(item).then();
-            e.keepOpen = true;
-        }
-    }, [actionClick, subComponentSelected]);
-    var selectedRowCount = selectedRows.length;
-    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (menuOption) {
-        return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
-    });
+    var onMenuItemClick = react.useCallback(function (e, item) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!item.subComponent) return [3 /*break*/, 1];
+                    subComponentIsValid.current = false;
+                    setSubSelectedValue(null);
+                    setSubComponentSelected(subComponentSelected === item ? null : item);
+                    e.keepOpen = true;
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, actionClick(item, e.key === "Tab" ? (e.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD) : CloseReason.CLICK).then()];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [actionClick, subComponentSelected]);
     var save = react.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -3489,19 +3562,23 @@ var GridFormPopoverMenu = function (props) {
                     if (!(!actionProcessing.current && subComponentSelected)) return [3 /*break*/, 2];
                     if (!subComponentIsValid.current)
                         return [2 /*return*/, false];
-                    return [4 /*yield*/, actionClick(subComponentSelected)];
+                    return [4 /*yield*/, actionClick(subComponentSelected, "click")];
                 case 1:
                     _a.sent();
-                    return [2 /*return*/, false];
+                    return [2 /*return*/, true];
                 case 2: 
                 // Otherwise assume it's a cancel, either way we close the menu
                 return [2 /*return*/, true];
             }
         });
     }); }, [actionClick, subComponentSelected]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
-    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions, className: "GridFormPopupMenu" }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
-                return item.label === PopoutMenuSeparator ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled || !(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.includes(item)), title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)), item.subComponent && subComponentSelected === item && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+    var _e = useGridPopoverHook({
+        className: props.className,
+        invalid: function () { return subComponentSelected && !subComponentIsValid.current; },
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
+    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormPopupMenu" }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                return item.label === PopoutMenuSeparator ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)), item.subComponent && subComponentSelected === item && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                 return item.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
                                         data: data,
                                         value: subSelectedValue,
@@ -3528,7 +3605,7 @@ var GridPopoverMenu = function (colDef, custom) {
 };
 
 var bearingValueFormatter = function (params) {
-    var value = params.value;
+    var value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
     if (value == null) {
         return "-";
     }
@@ -3611,28 +3688,33 @@ styleInject(css_248z$2);
 var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
 styleInject(css_248z$1);
 
+var FormError = function (props) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsxRuntime.jsx("span", __assign({ style: {
+                    fontSize: "0.7rem"
+                } }, { children: props.helpText })))] }));
+};
+
 var TextInputFormatted = function (props) {
     return (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", spellCheck: true, defaultValue: props.value }, lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className"]), { className: "LuiTextInput-input", onMouseEnter: function (e) {
                             e.currentTarget.focus();
                             props.onMouseEnter && props.onMouseEnter(e);
-                        } })), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsxRuntime.jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: props.helpText })))] })));
+                        } })), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), jsxRuntime.jsx(FormError, { error: props.error, helpText: props.helpText })] })));
 };
 
 var GridFormEditBearing = function (props) {
     var _a = useGridPopoverContext(), field = _a.field, initialValue = _a.value;
-    var _b = react.useState("".concat(initialValue !== null && initialValue !== void 0 ? initialValue : "")), value = _b[0], setValue = _b[1];
+    // This clears out any scientific precision
+    var defaultValue = react.useMemo(function () { return (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()); }, [initialValue]);
+    var _b = react.useState(defaultValue), value = _b[0], setValue = _b[1];
+    var invalid = react.useCallback(function () { return bearingStringValidator(value, props.range); }, [props.range, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var parsedValue;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (bearingStringValidator(value))
-                        return [2 /*return*/, false];
                     parsedValue = bearingNumberParser(value);
                     // Value didn't change so don't save just cancel
-                    if (parsedValue === initialValue) {
+                    if (parsedValue === bearingNumberParser(defaultValue)) {
                         return [2 /*return*/, true];
                     }
                     if (!props.onSave) return [3 /*break*/, 2];
@@ -3651,14 +3733,15 @@ var GridFormEditBearing = function (props) {
                 case 3: return [2 /*return*/, true];
             }
         });
-    }); }, [field, initialValue, props, value]);
-    var _c = useGridPopoverHook({
+    }); }, [defaultValue, field, props, value]);
+    var popoverWrapper = useGridPopoverHook({
         className: props.className,
+        invalid: invalid,
         save: save
-    }), popoverWrapper = _c.popoverWrapper, onlyInputKeyboardEventHandlers = _c.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsxRuntime.jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsxRuntime.jsx(TextInputFormatted, __assign({ value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
+    }).popoverWrapper;
+    return popoverWrapper(jsxRuntime.jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsxRuntime.jsx(TextInputFormatted, { value: defaultValue, onChange: function (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) })) })));
+            }, autoFocus: true, placeholder: props.placeHolder, formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" }) })));
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
@@ -3803,9 +3886,7 @@ var TextAreaInput = function (props) {
                                     e.currentTarget.selectionStart = e.currentTarget.value.length;
                                 }
                                 props.onMouseEnter && props.onMouseEnter(e);
-                            } }, { children: props.value })) }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextAreaInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsxRuntime.jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: props.helpText })))] })));
+                            } }, { children: props.value })) }))] })), jsxRuntime.jsx(FormError, { error: props.error, helpText: props.helpText })] })));
 };
 
 var TextInputValidator = function (props, value, data) {
@@ -3837,8 +3918,6 @@ var GridFormTextArea = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (invalid())
-                        return [2 /*return*/, false];
                     if (initialVale === (value !== null && value !== void 0 ? value : ""))
                         return [2 /*return*/, true];
                     if (!props.onSave) return [3 /*break*/, 2];
@@ -3855,9 +3934,13 @@ var GridFormTextArea = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, initialVale, value, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsxRuntime.jsx(TextAreaInput, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }, onlyInputKeyboardEventHandlers)) })));
+    }); }, [initialVale, value, props, field]);
+    var popoverWrapper = useGridPopoverHook({
+        className: props.className,
+        invalid: invalid,
+        save: save
+    }).popoverWrapper;
+    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsxRuntime.jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }) })));
 };
 
 var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __assign({ editor: GridFormTextArea }, params)); };
@@ -3866,7 +3949,7 @@ var GridFormTextInput = function (props) {
     var _a, _b;
     var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
-    var initValue = initialVale == null ? "" : "".concat(initialVale);
+    var initValue = react.useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
     var _d = react.useState(initValue), value = _d[0], setValue = _d[1];
     var invalid = react.useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3894,8 +3977,12 @@ var GridFormTextInput = function (props) {
             }
         });
     }); }, [invalid, value, initValue, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsxRuntime.jsx(TextInputFormatted, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, style: { width: "100%" }, placeholder: props.placeholder }, onlyInputKeyboardEventHandlers, { helpText: helpText })) })));
+    var popoverWrapper = useGridPopoverHook({
+        className: props.className,
+        invalid: invalid,
+        save: save
+    }).popoverWrapper;
+    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsxRuntime.jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, style: { width: "100%" }, placeholder: props.placeholder, helpText: helpText }) })));
 };
 
 var GridPopoverTextInput = function (colDef, params) {
@@ -3904,7 +3991,7 @@ var GridPopoverTextInput = function (colDef, params) {
 
 var GridFormSubComponentTextInput = function (props) {
     var _a;
-    var _b = react.useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave, data = _b.data;
+    var _b = react.useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, data = _b.data;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     // If is not initialised yet as it's just been created then set the default value
     react.useEffect(function () {
@@ -3915,30 +4002,14 @@ var GridFormSubComponentTextInput = function (props) {
     react.useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsxRuntime.jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, autoFocus: true, onKeyDown: function (e) {
-            if (e.key === "Tab" || e.key === "Enter") {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }, onKeyUp: function (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: {
+    return (jsxRuntime.jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, autoFocus: true, placeholder: props.placeholder, style: {
             width: "100%"
         } }));
 };
 
 var GridFormSubComponentTextArea = function (props) {
     var _a;
-    var _b = react.useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
+    var _b = react.useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
     // If is not initialised yet as it's just been created then set the default value
     react.useEffect(function () {
@@ -3949,18 +4020,7 @@ var GridFormSubComponentTextArea = function (props) {
     react.useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsxRuntime.jsx("div", __assign({ className: clsx("FreeTextInput LuiDeprecatedForms", props.className) }, { children: jsxRuntime.jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), helpText: helpText, autoFocus: true, placeholder: props.placeholder, onKeyDown: function (e) {
-                if (e.key === "Tab") {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            }, onKeyUp: function (e) {
-                if (e.key === "Tab") {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    !e.shiftKey && triggerSave().then();
-                }
-            } }) })));
+    return (jsxRuntime.jsx("div", __assign({ className: clsx("FreeTextInput LuiDeprecatedForms", props.className) }, { children: jsxRuntime.jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), helpText: helpText, autoFocus: true, placeholder: props.placeholder }) })));
 };
 
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton .LuiIcon{margin:0 4px!important}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress{background-color:#e2f3f7!important;color:#007198!important;cursor:progress}.ActionButton-inProgress svg *{fill:#0000!important}";