@linzjs/step-ag-grid 7.11.7 → 7.11.9

package/dist/step-ag-grid.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMemo, useLayoutEffect, useEffect, createContext, memo, forwardRef, useRef, useContext, useState, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
-import { findIndex, debounce, negate, isEmpty, delay, sortBy, last, difference, castArray, remove, flatten, xorBy, partition, pick, groupBy, fromPairs, toPairs, omit } from 'lodash-es';
+import { findIndex, debounce, negate, isEmpty, difference, delay, sortBy, defer as defer$1, last, castArray, remove, flatten, xorBy, partition, pick, groupBy, fromPairs, toPairs, omit } from 'lodash-es';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { AgGridReact } from 'ag-grid-react';
 import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput, LuiButton } from '@linzjs/lui';
@@ -1427,8 +1427,8 @@ var ControlledMenuFr = function (_a, externalRef) {
         if (activeElement !== firstInputEl && activeElement !== lastInputEl)
             return;
         var isTextArea = activeElement.nodeName === "TEXTAREA";
-        var suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") || isTextArea;
-        var allowTabToSave = activeElement.getAttribute("data-allowtabtosave");
+        var suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") != "false" || isTextArea;
+        var allowTabToSave = activeElement.getAttribute("data-allowtabtosave") != "false";
         var invokeSave = function (reason) {
             var _a, _b;
             if (!(saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current))
@@ -2060,68 +2060,68 @@ var GridContextProvider = function (props) {
     var _b = useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = useRef([]);
     var externallySelectedItemsAreInSync = useRef(false);
-    var setGridApi = function (gridApi) {
+    var setGridApi = useCallback(function (gridApi) {
         _setGridApi(gridApi);
         setGridReady(!!gridApi);
-    };
+    }, []);
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
      *
      * @param hasApiFn Execute when api is ready.
      * @param noApiFn Execute if api is not ready.
      */
-    var gridApiOp = function (hasApiFn, noApiFn) {
+    var gridApiOp = useCallback(function (hasApiFn, noApiFn) {
         if (!noApiFn) {
             noApiFn = (function () { });
         }
         return gridApi ? hasApiFn(gridApi) : noApiFn();
-    };
+    }, [gridApi]);
     /**
      * Set the quick filter value to grid.
      */
-    var setQuickFilter = function (quickFilter) {
+    var setQuickFilter = useCallback(function (quickFilter) {
         gridApiOp(function (gridApi) { return gridApi.setQuickFilter(quickFilter); });
-    };
+    }, [gridApiOp]);
     /**
      * Get all row id's in grid.
      */
-    var _getAllRowIds = function () {
+    var _getAllRowIds = useCallback(function () {
         var result = [];
         return gridApiOp(function (gridApi) {
             gridApi.forEachNode(function (node) { return result.push(node.data.id); });
             return result;
         }, function () { return result; });
-    };
+    }, [gridApiOp]);
     /**
      * Record all row id's before update so that we can select/flash the new rows after update.
      */
-    var beforeUpdate = function () {
+    var beforeUpdate = useCallback(function () {
         idsBeforeUpdate.current = _getAllRowIds();
-    };
+    }, [_getAllRowIds]);
     /**
      * Find new row ids
      * Uses beforeUpdate ids to find new nodes.
      */
-    var _getNewNodes = function () {
+    var _getNewNodes = useCallback(function () {
         return gridApiOp(function (gridApi) {
             return difference(_getAllRowIds(), idsBeforeUpdate.current)
                 .map(function (rowId) { return gridApi.getRowNode("" + rowId); }) //
                 .filter(function (r) { return r; });
         }, function () { return []; });
-    };
+    }, [_getAllRowIds, gridApiOp]);
     /**
      * Get grid nodes via rowIds.  If rowIds has no matching node the result may be smaller than expected.
      * This can happen if the grid has not re-rendered yet.
      *
      * @param rowIds Row ids to get from grid.
      */
-    var _rowIdsToNodes = function (rowIds) {
+    var _rowIdsToNodes = useCallback(function (rowIds) {
         return gridApiOp(function (gridApi) {
             return rowIds
                 .map(function (rowId) { return gridApi.getRowNode("" + rowId); }) //
                 .filter(function (r) { return r; });
         }, function () { return []; });
-    };
+    }, [gridApiOp]);
     /**
      * Internal method for selecting and flashing rows.
      *
@@ -2130,7 +2130,7 @@ var GridContextProvider = function (props) {
      * @param flash Whether to flash rows
      * @param retryCount Table updates may not be present when this is called, so retry is needed.
      */
-    var _selectRowsWithOptionalFlash = function (rowIds, select, flash, retryCount) {
+    var _selectRowsWithOptionalFlash = useCallback(function (rowIds, select, flash, retryCount) {
         if (retryCount === void 0) { retryCount = 15; }
         return gridApiOp(function (gridApi) {
             var _a;
@@ -2153,7 +2153,10 @@ var GridContextProvider = function (props) {
                     var rowIndex_1 = firstNode.rowIndex;
                     if (rowIndex_1 != null && col != null) {
                         var colId_1 = col.colId;
-                        colId_1 != null && setTimeout(function () { return gridApi.setFocusedCell(rowIndex_1, colId_1); }, 100);
+                        // We need to make sure we aren't currently editing a cell otherwise tests will fail
+                        // as they will start to edit the cell before this stuff has a chance to run
+                        colId_1 != null &&
+                            defer$1(function () { return isEmpty(gridApi.getEditingCells()) && gridApi.setFocusedCell(rowIndex_1, colId_1); });
                     }
                 }
             }
@@ -2178,11 +2181,11 @@ var GridContextProvider = function (props) {
                 }, 250);
             }
         });
-    };
-    var selectRowsById = function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, true, false); };
-    var selectRowsByIdWithFlash = function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, true, true); };
-    var flashRows = function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, false, true); };
-    var selectRowsDiff = function (fn) { return __awaiter(void 0, void 0, void 0, function () {
+    }, [_getNewNodes, _rowIdsToNodes, gridApiOp]);
+    var selectRowsById = useCallback(function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, true, false); }, [_selectRowsWithOptionalFlash]);
+    var selectRowsByIdWithFlash = useCallback(function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, true, true); }, [_selectRowsWithOptionalFlash]);
+    var flashRows = useCallback(function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, false, true); }, [_selectRowsWithOptionalFlash]);
+    var selectRowsDiff = useCallback(function (fn) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2194,8 +2197,8 @@ var GridContextProvider = function (props) {
                     return [2 /*return*/];
             }
         });
-    }); };
-    var selectRowsWithFlashDiff = function (fn) { return __awaiter(void 0, void 0, void 0, function () {
+    }); }, [_selectRowsWithOptionalFlash, beforeUpdate]);
+    var selectRowsWithFlashDiff = useCallback(function (fn) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2207,8 +2210,8 @@ var GridContextProvider = function (props) {
                     return [2 /*return*/];
             }
         });
-    }); };
-    var flashRowsDiff = function (fn) { return __awaiter(void 0, void 0, void 0, function () {
+    }); }, [_selectRowsWithOptionalFlash, beforeUpdate]);
+    var flashRowsDiff = useCallback(function (fn) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2220,15 +2223,15 @@ var GridContextProvider = function (props) {
                     return [2 /*return*/];
             }
         });
-    }); };
-    var getSelectedRows = function () {
+    }); }, [_selectRowsWithOptionalFlash, beforeUpdate]);
+    var getSelectedRows = useCallback(function () {
         return gridApiOp(function (gridApi) { return gridApi.getSelectedRows(); }, function () { return []; });
-    };
-    var getSelectedRowIds = function () { return getSelectedRows().map(function (row) { return row.id; }); };
-    var editingCells = function () {
+    }, [gridApiOp]);
+    var getSelectedRowIds = useCallback(function () { return getSelectedRows().map(function (row) { return row.id; }); }, [getSelectedRows]);
+    var editingCells = useCallback(function () {
         return gridApiOp(function (gridApi) { return isNotEmpty(gridApi.getEditingCells()); }, function () { return false; });
-    };
-    var ensureRowVisible = function (id) {
+    }, [gridApiOp]);
+    var ensureRowVisible = useCallback(function (id) {
         return gridApiOp(function (gridApi) {
             var node = gridApi.getRowNode("".concat(id));
             if (!node)
@@ -2236,29 +2239,38 @@ var GridContextProvider = function (props) {
             gridApi.ensureNodeVisible(node);
             return true;
         });
-    };
+    }, [gridApiOp]);
     /**
      * Scroll last selected row into view on grid sort change
      */
-    var ensureSelectedRowIsVisible = function () {
+    var ensureSelectedRowIsVisible = useCallback(function () {
         gridApiOp(function (gridApi) {
             var selectedNodes = gridApi.getSelectedNodes();
             if (isEmpty(selectedNodes))
                 return;
             gridApi.ensureNodeVisible(last(selectedNodes));
         });
-    };
+    }, [gridApiOp]);
     /**
      * Resize columns to fit container
      */
-    var sizeColumnsToFit = function () {
+    var sizeColumnsToFit = useCallback(function () {
         gridApiOp(function (gridApi) {
             // Hide size columns to fit errors in tests
             document.body.clientWidth && gridApi.sizeColumnsToFit();
         });
-    };
-    var stopEditing = function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); };
-    var updatingCells = function (props, fnUpdate, setSaving, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
+    }, [gridApiOp]);
+    var stopEditing = useCallback(function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); }, [gridApiOp]);
+    var selectNextCell = useCallback(function (tabDirection) {
+        if (tabDirection === void 0) { tabDirection = 0; }
+        gridApiOp(function (gridApi) {
+            if (tabDirection == 1)
+                gridApi.tabToNextCell();
+            if (tabDirection == -1)
+                gridApi.tabToPreviousCell();
+        });
+    }, [gridApiOp]);
+    var updatingCells = useCallback(function (props, fnUpdate, setSaving, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2319,25 +2331,16 @@ var GridContextProvider = function (props) {
                 case 1: return [2 /*return*/, _a.sent()];
             }
         });
-    }); };
-    var redrawRows = function (rowNodes) {
+    }); }, [gridApiOp, modifyUpdating, selectNextCell]);
+    var redrawRows = useCallback(function (rowNodes) {
         gridApiOp(function (gridApi) {
             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();
-        });
-    };
-    var setExternallySelectedItemsAreInSync = function (inSync) {
+    }, [gridApiOp]);
+    var setExternallySelectedItemsAreInSync = useCallback(function (inSync) {
         externallySelectedItemsAreInSync.current = inSync;
-    };
-    var waitForExternallySelectedItemsToBeInSync = function () { return __awaiter(void 0, void 0, void 0, function () {
+    }, []);
+    var waitForExternallySelectedItemsToBeInSync = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var i;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2356,7 +2359,7 @@ var GridContextProvider = function (props) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); };
+    }); }, []);
     return (jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2679,9 +2682,9 @@ var GridHeaderSelect = function (_a) {
     // This is used to force an update on selection change
     var _b = useState(0), updateCounter = _b[0], setUpdateCounter = _b[1];
     var selectedNodeCount = api.getSelectedRows().length;
-    var clickHandler = function () {
+    var clickHandler = useCallback(function () {
         setUpdateCounter(updateCounter + 1);
-    };
+    }, [updateCounter]);
     useEffect(function () {
         api.addEventListener("selectionChanged", clickHandler);
         return function () { return api.removeEventListener("selectionChanged", clickHandler); };
@@ -2832,9 +2835,9 @@ var Grid = function (params) {
                             else {
                                 e.api.deselectAll();
                             }
-                            return false;
+                            return true;
                         }
-                        return true;
+                        return false;
                     },
                     onCellClicked: clickSelectorCheckboxWhenContainingCellClicked
                 }
@@ -3215,8 +3218,7 @@ var fieldToString = function (field) {
     return typeof field == "symbol" ? field.toString() : "".concat(field);
 };
 var GridFormDropDown = function (props) {
-    var stopEditing = useContext(GridContext).stopEditing;
-    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
+    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, data = _a.data;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
     var _b = useState(""), filter = _b[0], setFilter = _b[1];
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
@@ -3225,7 +3227,8 @@ var GridFormDropDown = function (props) {
     var subComponentIsValid = useRef(false);
     var subComponentInitialValue = useRef(null);
     var _e = useState(null), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
-    var _f = useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
+    // Note: null is assumed to be the filter
+    var _f = useState(null), selectedItem = _f[0], setSelectedItem = _f[1];
     var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var hasChanged;
         return __generator(this, function (_a) {
@@ -3246,45 +3249,6 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [field, props, selectedRows]);
-    var clickItemHandler = useCallback(function (value, subComponentValue, reason) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            if (subComponentValue !== undefined && !subComponentIsValid.current)
-                return [2 /*return*/, false];
-            return [2 /*return*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, selectItemHandler(value, subComponentValue)];
-                            case 1: return [2 /*return*/, _a.sent()];
-                        }
-                    });
-                }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
-        });
-    }); }, [selectItemHandler, updateValue]);
-    var selectFilterHandler = useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-                        var _a;
-                        return __generator(this, function (_b) {
-                            switch (_b.label) {
-                                case 0:
-                                    _a = props.onSelectFilter;
-                                    if (!_a) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, props.onSelectFilter({ selectedRows: selectedRows, value: value })];
-                                case 1:
-                                    _a = (_b.sent());
-                                    _b.label = 2;
-                                case 2:
-                                    return [2 /*return*/, true];
-                            }
-                        });
-                    }); }, 0)];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [props, updateValue]);
     // Load up options list if it's async function
     useEffect(function () {
         var _a;
@@ -3338,7 +3302,7 @@ var GridFormDropDown = function (props) {
                     return undefined;
                 }
                 var str = option.label || "";
-                return str.toLowerCase().indexOf(filter.toLowerCase()) === -1 ? option.value : undefined;
+                return str.toLowerCase().indexOf(filter.toLowerCase()) !== -1 ? option : undefined;
             })
                 .filter(function (r) { return r !== undefined; }));
         }
@@ -3359,83 +3323,67 @@ var GridFormDropDown = function (props) {
      * Saves are wrapped in updateValue and triggered by blur events
      */
     var save = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onSelectFilter;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!options)
                         return [2 /*return*/, true];
-                    // Handler for sub-selected value
-                    if (!selectedSubComponent)
-                        return [2 /*return*/, true];
-                    if (selectedSubComponent.subComponent && !subComponentIsValid.current)
-                        return [2 /*return*/, false];
-                    return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
+                    if (!(selectedItem === null)) return [3 /*break*/, 5];
+                    if (!props.onSelectFilter) return [3 /*break*/, 2];
+                    onSelectFilter = props.onSelectFilter;
+                    return [4 /*yield*/, onSelectFilter({ selectedRows: selectedRows, value: filter })];
                 case 1:
                     _a.sent();
                     return [2 /*return*/, true];
+                case 2:
+                    if (!(filteredValues.length === 1)) return [3 /*break*/, 4];
+                    if (filteredValues[0].subComponent)
+                        return [2 /*return*/, false];
+                    return [4 /*yield*/, selectItemHandler(filteredValues[0].value, null)];
+                case 3: return [2 /*return*/, _a.sent()];
+                case 4: return [2 /*return*/, false];
+                case 5:
+                    if (selectedItem.subComponent && !subComponentIsValid.current)
+                        return [2 /*return*/, false];
+                    return [4 /*yield*/, selectItemHandler(selectedItem.value, subSelectedValue)];
+                case 6:
+                    _a.sent();
+                    return [2 /*return*/, true];
             }
         });
-    }); }, [options, selectItemHandler, selectedSubComponent, subSelectedValue]);
+    }); }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
     var popoverWrapper = useGridPopoverHook({
         className: props.className,
-        invalid: function () { return !!(selectedSubComponent && !subComponentIsValid.current); },
+        invalid: function () { return !!(selectedItem && !subComponentIsValid.current); },
         save: save
     }).popoverWrapper;
-    var enterKeyPressedRef = useRef(false);
-    var handleKeyDown = useCallback(function (e) {
-        if (e.key === "Enter") {
-            e.stopPropagation();
-            e.preventDefault();
-            enterKeyPressedRef.current = true;
-        }
-    }, []);
-    var handleKeyUp = useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (!options)
-                        return [2 /*return*/];
-                    if (!(e.key === "Enter")) return [3 /*break*/, 3];
-                    e.stopPropagation();
-                    e.preventDefault();
-                    if (!enterKeyPressedRef.current)
-                        return [2 /*return*/];
-                    _a = props.onSelectFilter;
-                    if (!_a) return [3 /*break*/, 2];
-                    return [4 /*yield*/, selectFilterHandler(filter)];
-                case 1:
-                    _a = (_b.sent());
-                    _b.label = 2;
-                case 2:
-                    stopEditing();
-                    _b.label = 3;
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [filter, options, props.onSelectFilter, selectFilterHandler, stopEditing]);
-    return popoverWrapper(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
+    return popoverWrapper(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsx(FocusableItem, __assign({ className: "filter-item", onFocus: function () {
+                            setSelectedItem(null);
+                            setSubSelectedValue(null);
+                            subComponentIsValid.current = true;
+                        } }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
-                            return (jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsx("input", { autoFocus: true, className: "LuiTextInput-input", ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), props.filterHelpText && isNotEmpty(filter) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
-                        } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsx(MenuItem, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: "No Options" }), "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                            return (jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsx("input", { className: "LuiTextInput-input", ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter && !(filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: function (e) { return setFilter(e.target.value); } }), props.filterHelpText && isNotEmpty(filter) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
+                        } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && isEmpty(filteredValues) && (jsx(MenuItem, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: "No Options" }), "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
-                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
+                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : (filteredValues.includes(item) && (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: function () {
+                                            setSelectedItem(item);
                                             if (item.subComponent) {
-                                                // toggle selection
-                                                setSelectedSubComponent(selectedSubComponent === item ? null : item);
+                                                setSelectedItem(item);
                                                 subComponentIsValid.current = true;
                                                 subComponentInitialValue.current = null;
-                                                e.keepOpen = true;
                                             }
                                             else {
-                                                clickItemHandler(item.value, undefined, e.key === "Tab"
-                                                    ? e.shiftKey
-                                                        ? CloseReason.TAB_BACKWARD
-                                                        : CloseReason.TAB_FORWARD
-                                                    : CloseReason.CLICK).then();
+                                                setSubSelectedValue(null);
+                                                subComponentIsValid.current = true;
+                                            }
+                                        }, onClick: function (e) {
+                                            if (item.subComponent) {
+                                                e.keepOpen = true;
                                             }
-                                        } }, { 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 && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (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 && selectedItem === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 context: { options: options },
                                                 data: data,
                                                 value: subSelectedValue,
@@ -3455,7 +3403,7 @@ var GridFormDropDown = function (props) {
                                                         return [2 /*return*/];
                                                     });
                                                 }); }
-                                            } }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index)));
+                                            } }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))));
                         })] }) }))] }));
 };