@linzjs/step-ag-grid 7.11.8 → 7.11.10

package/dist/index.js

@@ -1448,8 +1448,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") == "true" || isTextArea;
+        var allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
         var invokeSave = function (reason) {
             var _a, _b;
             if (!(saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current))
@@ -2081,68 +2081,68 @@ var GridContextProvider = function (props) {
     var _b = React.useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = React.useRef([]);
     var externallySelectedItemsAreInSync = React.useRef(false);
-    var setGridApi = function (gridApi) {
+    var setGridApi = React.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 = React.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 = React.useCallback(function (quickFilter) {
         gridApiOp(function (gridApi) { return gridApi.setQuickFilter(quickFilter); });
-    };
+    }, [gridApiOp]);
     /**
      * Get all row id's in grid.
      */
-    var _getAllRowIds = function () {
+    var _getAllRowIds = React.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 = React.useCallback(function () {
         idsBeforeUpdate.current = _getAllRowIds();
-    };
+    }, [_getAllRowIds]);
     /**
      * Find new row ids
      * Uses beforeUpdate ids to find new nodes.
      */
-    var _getNewNodes = function () {
+    var _getNewNodes = React.useCallback(function () {
         return gridApiOp(function (gridApi) {
             return lodashEs.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 = React.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.
      *
@@ -2151,7 +2151,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 = React.useCallback(function (rowIds, select, flash, retryCount) {
         if (retryCount === void 0) { retryCount = 15; }
         return gridApiOp(function (gridApi) {
             var _a;
@@ -2176,7 +2176,8 @@ var GridContextProvider = function (props) {
                         var colId_1 = col.colId;
                         // 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 && lodashEs.defer(function () { return lodashEs.isEmpty(gridApi.getEditingCells()) && gridApi.setFocusedCell(rowIndex_1, colId_1); });
+                        colId_1 != null &&
+                            lodashEs.defer(function () { return lodashEs.isEmpty(gridApi.getEditingCells()) && gridApi.setFocusedCell(rowIndex_1, colId_1); });
                     }
                 }
             }
@@ -2201,11 +2202,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 = React.useCallback(function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, true, false); }, [_selectRowsWithOptionalFlash]);
+    var selectRowsByIdWithFlash = React.useCallback(function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, true, true); }, [_selectRowsWithOptionalFlash]);
+    var flashRows = React.useCallback(function (rowIds) { return _selectRowsWithOptionalFlash(rowIds, false, true); }, [_selectRowsWithOptionalFlash]);
+    var selectRowsDiff = React.useCallback(function (fn) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2217,8 +2218,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 = React.useCallback(function (fn) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2230,8 +2231,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 = React.useCallback(function (fn) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2243,15 +2244,15 @@ var GridContextProvider = function (props) {
                     return [2 /*return*/];
             }
         });
-    }); };
-    var getSelectedRows = function () {
+    }); }, [_selectRowsWithOptionalFlash, beforeUpdate]);
+    var getSelectedRows = React.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 = React.useCallback(function () { return getSelectedRows().map(function (row) { return row.id; }); }, [getSelectedRows]);
+    var editingCells = React.useCallback(function () {
         return gridApiOp(function (gridApi) { return isNotEmpty(gridApi.getEditingCells()); }, function () { return false; });
-    };
-    var ensureRowVisible = function (id) {
+    }, [gridApiOp]);
+    var ensureRowVisible = React.useCallback(function (id) {
         return gridApiOp(function (gridApi) {
             var node = gridApi.getRowNode("".concat(id));
             if (!node)
@@ -2259,29 +2260,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 = React.useCallback(function () {
         gridApiOp(function (gridApi) {
             var selectedNodes = gridApi.getSelectedNodes();
             if (lodashEs.isEmpty(selectedNodes))
                 return;
             gridApi.ensureNodeVisible(lodashEs.last(selectedNodes));
         });
-    };
+    }, [gridApiOp]);
     /**
      * Resize columns to fit container
      */
-    var sizeColumnsToFit = function () {
+    var sizeColumnsToFit = React.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 = React.useCallback(function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); }, [gridApiOp]);
+    var selectNextCell = React.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 = React.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:
@@ -2342,25 +2352,16 @@ var GridContextProvider = function (props) {
                 case 1: return [2 /*return*/, _a.sent()];
             }
         });
-    }); };
-    var redrawRows = function (rowNodes) {
+    }); }, [gridApiOp, modifyUpdating, selectNextCell]);
+    var redrawRows = React.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 = React.useCallback(function (inSync) {
         externallySelectedItemsAreInSync.current = inSync;
-    };
-    var waitForExternallySelectedItemsToBeInSync = function () { return __awaiter(void 0, void 0, void 0, function () {
+    }, []);
+    var waitForExternallySelectedItemsToBeInSync = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var i;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2379,7 +2380,7 @@ var GridContextProvider = function (props) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); };
+    }); }, []);
     return (jsxRuntime.jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -3238,8 +3239,7 @@ var fieldToString = function (field) {
     return typeof field == "symbol" ? field.toString() : "".concat(field);
 };
 var GridFormDropDown = function (props) {
-    var stopEditing = React.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 = React.useState(""), filter = _b[0], setFilter = _b[1];
     var _c = React.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
@@ -3248,7 +3248,8 @@ var GridFormDropDown = function (props) {
     var subComponentIsValid = React.useRef(false);
     var subComponentInitialValue = React.useRef(null);
     var _e = React.useState(null), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
-    var _f = React.useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
+    // Note: null is assumed to be the filter
+    var _f = React.useState(null), selectedItem = _f[0], setSelectedItem = _f[1];
     var selectItemHandler = React.useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var hasChanged;
         return __generator(this, function (_a) {
@@ -3269,45 +3270,6 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [field, props, selectedRows]);
-    var clickItemHandler = 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)
-                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 = React.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
     React.useEffect(function () {
         var _a;
@@ -3361,7 +3323,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; }));
         }
@@ -3382,83 +3344,67 @@ var GridFormDropDown = function (props) {
      * Saves are wrapped in updateValue and triggered by blur events
      */
     var save = React.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 = React.useRef(false);
-    var handleKeyDown = React.useCallback(function (e) {
-        if (e.key === "Enter") {
-            e.stopPropagation();
-            e.preventDefault();
-            enterKeyPressedRef.current = true;
-        }
-    }, []);
-    var handleKeyUp = React.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(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) {
+    return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsxRuntime.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 (jsxRuntime.jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsxRuntime.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) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
-                        } })), 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, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: "No Options" }), "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                            return (jsxRuntime.jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsxRuntime.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) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
+                        } })), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] }))), jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && lodashEs.isEmpty(filteredValues) && (jsxRuntime.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 ? (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) {
+                            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) && (jsxRuntime.jsxs("div", { children: [jsxRuntime.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 && (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 && selectedItem === item && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 context: { options: options },
                                                 data: data,
                                                 value: subSelectedValue,
@@ -3478,7 +3424,7 @@ var GridFormDropDown = function (props) {
                                                         return [2 /*return*/];
                                                     });
                                                 }); }
-                                            } }, { children: item.subComponent && (jsxRuntime.jsx("div", __assign({ className: "subComponent" }, { children: jsxRuntime.jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index)));
+                                            } }, { children: item.subComponent && (jsxRuntime.jsx("div", __assign({ className: "subComponent" }, { children: jsxRuntime.jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))));
                         })] }) }))] }));
 };