handsontable 0.0.0-next-06a64be-20230621 → 0.0.0-next-d1c8e0e-20230621

package/plugins/dropdownMenu/dropdownMenu.js

@@ -22,7 +22,9 @@ require("core-js/modules/es.object.set-prototype-of.js");
 require("core-js/modules/es.object.get-prototype-of.js");
 var _base = require("../base");
 var _array = require("../../helpers/array");
+var _object = require("../../helpers/object");
 var _commandExecutor = _interopRequireDefault(require("../contextMenu/commandExecutor"));
+var _utils = require("../contextMenu/utils");
 var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _element = require("../../helpers/dom/element");
 var _itemsFactory = _interopRequireDefault(require("../contextMenu/itemsFactory"));
@@ -54,6 +56,7 @@ exports.PLUGIN_KEY = PLUGIN_KEY;
 var PLUGIN_PRIORITY = 230;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 var BUTTON_CLASS_NAME = 'changeType';
+var SHORTCUTS_GROUP = PLUGIN_KEY;
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -182,6 +185,7 @@ var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
       if (typeof settings.callback === 'function') {
         this.commandExecutor.setCommonCallback(settings.callback);
       }
+      this.registerShortcuts();
       _get(_getPrototypeOf(DropdownMenu.prototype), "enablePlugin", this).call(this);
       this.callOnPluginsReady(function () {
         _this2.hot.runHooks('afterDropdownMenuDefaultOptions', predefinedItems);
@@ -245,9 +249,71 @@ var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
       if (this.menu) {
         this.menu.destroy();
       }
+      this.unregisterShortcuts();
       _get(_getPrototypeOf(DropdownMenu.prototype), "disablePlugin", this).call(this);
     }
 
+    /**
+     * Register shortcuts responsible for toggling dropdown menu.
+     *
+     * @private
+     */
+  }, {
+    key: "registerShortcuts",
+    value: function registerShortcuts() {
+      var _this3 = this;
+      var context = this.hot.getShortcutManager().getContext('grid');
+      var callback = function callback() {
+        var _this3$hot$getSelecte = _this3.hot.getSelectedRangeLast(),
+          highlight = _this3$hot$getSelecte.highlight;
+        if ((highlight.isHeader() && highlight.row === -1 || highlight.isCell()) && highlight.col >= 0) {
+          _this3.hot.selectColumns(highlight.col, highlight.col, -1);
+          var _this3$hot$getSelecte2 = _this3.hot.getSelectedRangeLast(),
+            from = _this3$hot$getSelecte2.from;
+          var offset = (0, _utils.getDocumentOffsetByElement)(_this3.menu.container, _this3.hot.rootDocument);
+          var target = _this3.hot.getCell(-1, from.col, true);
+          var rect = target.getBoundingClientRect();
+          _this3.open({
+            left: rect.left + offset.left,
+            top: rect.top + target.offsetHeight + offset.top
+          }, {
+            left: rect.width
+          });
+          _this3.hot._registerTimeout(function () {
+            _this3.menu.selectFirstCell();
+          });
+        }
+      };
+      context.addShortcuts([{
+        keys: [['Shift', 'Alt', 'ArrowDown'], ['Shift', 'Enter']],
+        callback: callback,
+        runOnlyIf: function runOnlyIf() {
+          var _this3$hot$getSelecte3;
+          return ((_this3$hot$getSelecte3 = _this3.hot.getSelectedRangeLast()) === null || _this3$hot$getSelecte3 === void 0 ? void 0 : _this3$hot$getSelecte3.highlight.isHeader()) && !_this3.menu.isOpened();
+        },
+        group: SHORTCUTS_GROUP
+      }, {
+        keys: [['Shift', 'Alt', 'ArrowDown']],
+        callback: callback,
+        runOnlyIf: function runOnlyIf() {
+          var _this3$hot$getSelecte4;
+          return ((_this3$hot$getSelecte4 = _this3.hot.getSelectedRangeLast()) === null || _this3$hot$getSelecte4 === void 0 ? void 0 : _this3$hot$getSelecte4.highlight.isCell()) && !_this3.menu.isOpened();
+        },
+        group: SHORTCUTS_GROUP
+      }]);
+    }
+
+    /**
+     * Unregister shortcuts responsible for toggling dropdown menu.
+     *
+     * @private
+     */
+  }, {
+    key: "unregisterShortcuts",
+    value: function unregisterShortcuts() {
+      this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+    }
+
     /**
      * Registers the DOM listeners.
      *
@@ -256,33 +322,42 @@ var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "registerEvents",
     value: function registerEvents() {
-      var _this3 = this;
+      var _this4 = this;
       this.eventManager.addEventListener(this.hot.rootElement, 'click', function (event) {
-        return _this3.onTableClick(event);
+        return _this4.onTableClick(event);
       });
     }
 
     /**
      * Opens menu and re-position it based on the passed coordinates.
      *
-     * @param {object|Event} position An object with `pageX` and `pageY` properties which contains values relative to
-     *                                the top left of the fully rendered content area in the browser or with `clientX`
-     *                                and `clientY`  properties which contains values relative to the upper left edge
-     *                                of the content area (the viewport) of the browser window. This object is structurally
-     *                                compatible with native mouse event so it can be used either.
+     * @param {{ top: number, left: number }|Event} position An object with `top` and `left` properties
+     * which contains coordinates relative to the browsers viewport (without included scroll offsets).
+     * Or if the native event is passed the menu will be positioned based on the `pageX` and `pageY`
+     * coordinates.
+     * @param {{ above: number, below: number, left: number, right: number }} offset An object allows applying
+     * the offset to the menu position.
      * @fires Hooks#beforeDropdownMenuShow
      * @fires Hooks#afterDropdownMenuShow
      */
   }, {
     key: "open",
     value: function open(position) {
-      if (!this.menu) {
+      var _this$menu,
+        _this5 = this;
+      var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        above: 0,
+        below: 0,
+        left: 0,
+        right: 0
+      };
+      if ((_this$menu = this.menu) !== null && _this$menu !== void 0 && _this$menu.isOpened()) {
         return;
       }
       this.menu.open();
-      if (position.width) {
-        this.menu.setOffset('left', position.width);
-      }
+      (0, _object.objectEach)(offset, function (value, key) {
+        _this5.menu.setOffset(key, value);
+      });
       this.menu.setPosition(position);
     }
 
@@ -292,10 +367,8 @@ var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "close",
     value: function close() {
-      if (!this.menu) {
-        return;
-      }
-      this.menu.close();
+      var _this$menu2;
+      (_this$menu2 = this.menu) === null || _this$menu2 === void 0 ? void 0 : _this$menu2.close();
     }
 
     /**
@@ -367,23 +440,14 @@ var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
     key: "onTableClick",
     value: function onTableClick(event) {
       event.stopPropagation();
-      if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME) && !this.menu.isOpened()) {
-        var offsetTop = 0;
-        var offsetLeft = 0;
-        if (this.hot.rootDocument !== this.menu.container.ownerDocument) {
-          var frameElement = this.hot.rootWindow.frameElement;
-          var _frameElement$getBoun = frameElement.getBoundingClientRect(),
-            top = _frameElement$getBoun.top,
-            left = _frameElement$getBoun.left;
-          offsetTop = top;
-          offsetLeft = left;
-        }
+      if ((0, _element.hasClass)(event.target, BUTTON_CLASS_NAME)) {
+        var offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
         var rect = event.target.getBoundingClientRect();
         this.open({
-          left: rect.left + offsetLeft,
-          top: rect.top + event.target.offsetHeight + 3 + offsetTop,
-          width: rect.width,
-          height: rect.height
+          left: rect.left + offset.left,
+          top: rect.top + event.target.offsetHeight + 3 + offset.top
+        }, {
+          left: rect.width
         });
       }
     }

package/plugins/dropdownMenu/dropdownMenu.mjs

@@ -32,7 +32,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 import { BasePlugin } from "../base/index.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
+import { objectEach } from "../../helpers/object.mjs";
 import CommandExecutor from "../contextMenu/commandExecutor.mjs";
+import { getDocumentOffsetByElement } from "../contextMenu/utils.mjs";
 import EventManager from "../../eventManager.mjs";
 import { hasClass } from "../../helpers/dom/element.mjs";
 import ItemsFactory from "../contextMenu/itemsFactory.mjs";
@@ -47,6 +49,7 @@ Hooks.getSingleton().register('afterDropdownMenuExecute');
 export var PLUGIN_KEY = 'dropdownMenu';
 export var PLUGIN_PRIORITY = 230;
 var BUTTON_CLASS_NAME = 'changeType';
+var SHORTCUTS_GROUP = PLUGIN_KEY;
 
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
@@ -176,6 +179,7 @@ export var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
       if (typeof settings.callback === 'function') {
         this.commandExecutor.setCommonCallback(settings.callback);
       }
+      this.registerShortcuts();
       _get(_getPrototypeOf(DropdownMenu.prototype), "enablePlugin", this).call(this);
       this.callOnPluginsReady(function () {
         _this2.hot.runHooks('afterDropdownMenuDefaultOptions', predefinedItems);
@@ -239,9 +243,71 @@ export var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
       if (this.menu) {
         this.menu.destroy();
       }
+      this.unregisterShortcuts();
       _get(_getPrototypeOf(DropdownMenu.prototype), "disablePlugin", this).call(this);
     }
 
+    /**
+     * Register shortcuts responsible for toggling dropdown menu.
+     *
+     * @private
+     */
+  }, {
+    key: "registerShortcuts",
+    value: function registerShortcuts() {
+      var _this3 = this;
+      var context = this.hot.getShortcutManager().getContext('grid');
+      var callback = function callback() {
+        var _this3$hot$getSelecte = _this3.hot.getSelectedRangeLast(),
+          highlight = _this3$hot$getSelecte.highlight;
+        if ((highlight.isHeader() && highlight.row === -1 || highlight.isCell()) && highlight.col >= 0) {
+          _this3.hot.selectColumns(highlight.col, highlight.col, -1);
+          var _this3$hot$getSelecte2 = _this3.hot.getSelectedRangeLast(),
+            from = _this3$hot$getSelecte2.from;
+          var offset = getDocumentOffsetByElement(_this3.menu.container, _this3.hot.rootDocument);
+          var target = _this3.hot.getCell(-1, from.col, true);
+          var rect = target.getBoundingClientRect();
+          _this3.open({
+            left: rect.left + offset.left,
+            top: rect.top + target.offsetHeight + offset.top
+          }, {
+            left: rect.width
+          });
+          _this3.hot._registerTimeout(function () {
+            _this3.menu.selectFirstCell();
+          });
+        }
+      };
+      context.addShortcuts([{
+        keys: [['Shift', 'Alt', 'ArrowDown'], ['Shift', 'Enter']],
+        callback: callback,
+        runOnlyIf: function runOnlyIf() {
+          var _this3$hot$getSelecte3;
+          return ((_this3$hot$getSelecte3 = _this3.hot.getSelectedRangeLast()) === null || _this3$hot$getSelecte3 === void 0 ? void 0 : _this3$hot$getSelecte3.highlight.isHeader()) && !_this3.menu.isOpened();
+        },
+        group: SHORTCUTS_GROUP
+      }, {
+        keys: [['Shift', 'Alt', 'ArrowDown']],
+        callback: callback,
+        runOnlyIf: function runOnlyIf() {
+          var _this3$hot$getSelecte4;
+          return ((_this3$hot$getSelecte4 = _this3.hot.getSelectedRangeLast()) === null || _this3$hot$getSelecte4 === void 0 ? void 0 : _this3$hot$getSelecte4.highlight.isCell()) && !_this3.menu.isOpened();
+        },
+        group: SHORTCUTS_GROUP
+      }]);
+    }
+
+    /**
+     * Unregister shortcuts responsible for toggling dropdown menu.
+     *
+     * @private
+     */
+  }, {
+    key: "unregisterShortcuts",
+    value: function unregisterShortcuts() {
+      this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+    }
+
     /**
      * Registers the DOM listeners.
      *
@@ -250,33 +316,42 @@ export var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "registerEvents",
     value: function registerEvents() {
-      var _this3 = this;
+      var _this4 = this;
       this.eventManager.addEventListener(this.hot.rootElement, 'click', function (event) {
-        return _this3.onTableClick(event);
+        return _this4.onTableClick(event);
       });
     }
 
     /**
      * Opens menu and re-position it based on the passed coordinates.
      *
-     * @param {object|Event} position An object with `pageX` and `pageY` properties which contains values relative to
-     *                                the top left of the fully rendered content area in the browser or with `clientX`
-     *                                and `clientY`  properties which contains values relative to the upper left edge
-     *                                of the content area (the viewport) of the browser window. This object is structurally
-     *                                compatible with native mouse event so it can be used either.
+     * @param {{ top: number, left: number }|Event} position An object with `top` and `left` properties
+     * which contains coordinates relative to the browsers viewport (without included scroll offsets).
+     * Or if the native event is passed the menu will be positioned based on the `pageX` and `pageY`
+     * coordinates.
+     * @param {{ above: number, below: number, left: number, right: number }} offset An object allows applying
+     * the offset to the menu position.
      * @fires Hooks#beforeDropdownMenuShow
      * @fires Hooks#afterDropdownMenuShow
      */
   }, {
     key: "open",
     value: function open(position) {
-      if (!this.menu) {
+      var _this$menu,
+        _this5 = this;
+      var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        above: 0,
+        below: 0,
+        left: 0,
+        right: 0
+      };
+      if ((_this$menu = this.menu) !== null && _this$menu !== void 0 && _this$menu.isOpened()) {
         return;
       }
       this.menu.open();
-      if (position.width) {
-        this.menu.setOffset('left', position.width);
-      }
+      objectEach(offset, function (value, key) {
+        _this5.menu.setOffset(key, value);
+      });
       this.menu.setPosition(position);
     }
 
@@ -286,10 +361,8 @@ export var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "close",
     value: function close() {
-      if (!this.menu) {
-        return;
-      }
-      this.menu.close();
+      var _this$menu2;
+      (_this$menu2 = this.menu) === null || _this$menu2 === void 0 ? void 0 : _this$menu2.close();
     }
 
     /**
@@ -361,23 +434,14 @@ export var DropdownMenu = /*#__PURE__*/function (_BasePlugin) {
     key: "onTableClick",
     value: function onTableClick(event) {
       event.stopPropagation();
-      if (hasClass(event.target, BUTTON_CLASS_NAME) && !this.menu.isOpened()) {
-        var offsetTop = 0;
-        var offsetLeft = 0;
-        if (this.hot.rootDocument !== this.menu.container.ownerDocument) {
-          var frameElement = this.hot.rootWindow.frameElement;
-          var _frameElement$getBoun = frameElement.getBoundingClientRect(),
-            top = _frameElement$getBoun.top,
-            left = _frameElement$getBoun.left;
-          offsetTop = top;
-          offsetLeft = left;
-        }
+      if (hasClass(event.target, BUTTON_CLASS_NAME)) {
+        var offset = getDocumentOffsetByElement(this.menu.container, this.hot.rootDocument);
         var rect = event.target.getBoundingClientRect();
         this.open({
-          left: rect.left + offsetLeft,
-          top: rect.top + event.target.offsetHeight + 3 + offsetTop,
-          width: rect.width,
-          height: rect.height
+          left: rect.left + offset.left,
+          top: rect.top + event.target.offsetHeight + 3 + offset.top
+        }, {
+          left: rect.width
         });
       }
     }

package/plugins/filters/filters.js

@@ -76,6 +76,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 var PLUGIN_KEY = 'filters';
 exports.PLUGIN_KEY = PLUGIN_KEY;
 var PLUGIN_PRIORITY = 250;
+exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
+var SHORTCUTS_GROUP = PLUGIN_KEY;
 
 /**
  * @plugin Filters
@@ -112,7 +114,6 @@ var PLUGIN_PRIORITY = 250;
  * ```
  * :::
  */
-exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 var Filters = /*#__PURE__*/function (_BasePlugin) {
   _inherits(Filters, _BasePlugin);
   var _super = _createSuper(Filters);
@@ -292,6 +293,7 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
         this.dropdownMenuPlugin.disablePlugin();
         this.dropdownMenuPlugin.enablePlugin();
       }
+      this.registerShortcuts();
       _get(_getPrototypeOf(Filters.prototype), "enablePlugin", this).call(this);
     }
 
@@ -315,9 +317,41 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
         this.conditionCollection = null;
         this.hot.rowIndexMapper.unregisterMap(this.pluginName);
       }
+      this.unregisterShortcuts();
       _get(_getPrototypeOf(Filters.prototype), "disablePlugin", this).call(this);
     }
 
+    /**
+     * Register shortcuts responsible for clearing the filters.
+     *
+     * @private
+     */
+  }, {
+    key: "registerShortcuts",
+    value: function registerShortcuts() {
+      var _this4 = this;
+      this.hot.getShortcutManager().getContext('grid').addShortcut({
+        keys: [['Alt', 'A']],
+        stopPropagation: true,
+        callback: function callback() {
+          _this4.clearConditions();
+          _this4.filter();
+        },
+        group: SHORTCUTS_GROUP
+      });
+    }
+
+    /**
+     * Unregister shortcuts responsible for clearing the filters.
+     *
+     * @private
+     */
+  }, {
+    key: "unregisterShortcuts",
+    value: function unregisterShortcuts() {
+      this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+    }
+
     /* eslint-disable jsdoc/require-description-complete-sentence */
     /**
      * @memberof Filters#
@@ -484,7 +518,7 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "filter",
     value: function filter() {
-      var _this4 = this;
+      var _this5 = this;
       var dataFilter = this._createDataFilter();
       var needToFilter = !this.conditionCollection.isEmpty();
       var visibleVisualRows = [];
@@ -494,18 +528,18 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
         if (needToFilter) {
           var trimmedRows = [];
           this.hot.batchExecution(function () {
-            _this4.filtersRowsMap.clear();
+            _this5.filtersRowsMap.clear();
             visibleVisualRows = (0, _array.arrayMap)(dataFilter.filter(), function (rowData) {
               return rowData.meta.visualRow;
             });
             var visibleVisualRowsAssertion = (0, _utils.createArrayAssertion)(visibleVisualRows);
-            (0, _number.rangeEach)(_this4.hot.countSourceRows() - 1, function (row) {
+            (0, _number.rangeEach)(_this5.hot.countSourceRows() - 1, function (row) {
               if (!visibleVisualRowsAssertion(row)) {
                 trimmedRows.push(row);
               }
             });
             (0, _array.arrayEach)(trimmedRows, function (physicalRow) {
-              _this4.filtersRowsMap.setValueAtIndex(physicalRow, true);
+              _this5.filtersRowsMap.setValueAtIndex(physicalRow, true);
             });
           }, true);
           if (!visibleVisualRows.length) {
@@ -518,7 +552,6 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
       this.hot.runHooks('afterFilter', conditions);
       this.hot.view.adjustElementsSize(true);
       this.hot.render();
-      this.clearColumnSelection();
     }
 
     /**
@@ -542,20 +575,6 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
       };
     }
 
-    /**
-     * Clears column selection.
-     *
-     * @private
-     */
-  }, {
-    key: "clearColumnSelection",
-    value: function clearColumnSelection() {
-      var selectedColumn = this.getSelectedColumn();
-      if (selectedColumn !== null) {
-        this.hot.selectCell(0, selectedColumn.visualIndex);
-      }
-    }
-
     /**
      * Returns handsontable source data with cell meta based on current selection.
      *
@@ -565,21 +584,21 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "getDataMapAtColumn",
     value: function getDataMapAtColumn(column) {
-      var _this5 = this;
+      var _this6 = this;
       var visualColumn = this.hot.toVisualColumn(column);
       var data = [];
       (0, _array.arrayEach)(this.hot.getSourceDataAtCol(visualColumn), function (value, rowIndex) {
-        var _this5$hot$getDataAtC;
-        var _this5$hot$getCellMet = _this5.hot.getCellMeta(rowIndex, visualColumn),
-          row = _this5$hot$getCellMet.row,
-          col = _this5$hot$getCellMet.col,
-          visualCol = _this5$hot$getCellMet.visualCol,
-          visualRow = _this5$hot$getCellMet.visualRow,
-          type = _this5$hot$getCellMet.type,
-          instance = _this5$hot$getCellMet.instance,
-          dateFormat = _this5$hot$getCellMet.dateFormat,
-          locale = _this5$hot$getCellMet.locale;
-        var dataValue = (_this5$hot$getDataAtC = _this5.hot.getDataAtCell(_this5.hot.toVisualRow(rowIndex), visualColumn)) !== null && _this5$hot$getDataAtC !== void 0 ? _this5$hot$getDataAtC : value;
+        var _this6$hot$getDataAtC;
+        var _this6$hot$getCellMet = _this6.hot.getCellMeta(rowIndex, visualColumn),
+          row = _this6$hot$getCellMet.row,
+          col = _this6$hot$getCellMet.col,
+          visualCol = _this6$hot$getCellMet.visualCol,
+          visualRow = _this6$hot$getCellMet.visualRow,
+          type = _this6$hot$getCellMet.type,
+          instance = _this6$hot$getCellMet.instance,
+          dateFormat = _this6$hot$getCellMet.dateFormat,
+          locale = _this6$hot$getCellMet.locale;
+        var dataValue = (_this6$hot$getDataAtC = _this6.hot.getDataAtCell(_this6.hot.toVisualRow(rowIndex), visualColumn)) !== null && _this6$hot$getDataAtC !== void 0 ? _this6$hot$getDataAtC : value;
         data.push({
           meta: {
             row: row,
@@ -606,14 +625,14 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onAfterChange",
     value: function onAfterChange(changes) {
-      var _this6 = this;
+      var _this7 = this;
       if (changes) {
         (0, _array.arrayEach)(changes, function (change) {
           var _change = _slicedToArray(change, 2),
             prop = _change[1];
-          var columnIndex = _this6.hot.propToCol(prop);
-          if (_this6.conditionCollection.hasConditions(columnIndex)) {
-            _this6.updateValueComponentCondition(columnIndex);
+          var columnIndex = _this7.hot.propToCol(prop);
+          if (_this7.conditionCollection.hasConditions(columnIndex)) {
+            _this7.updateValueComponentCondition(columnIndex);
           }
         });
       }
@@ -684,10 +703,10 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onBeforeDropdownMenuSetItems",
     value: function onBeforeDropdownMenuSetItems() {
-      var _this7 = this;
+      var _this8 = this;
       if (this.dropdownMenuPlugin) {
         this.dropdownMenuPlugin.menu.addLocalHook('afterOpen', function () {
-          _this7.dropdownMenuPlugin.menu.hotMenu.updateSettings({
+          _this8.dropdownMenuPlugin.menu.hotMenu.updateSettings({
             hiddenRows: true
           });
         });
@@ -778,6 +797,7 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
         });
         this.filtersRowsMap.clear();
         this.filter();
+        this.hot.selectCell(0, selectedColumn.visualIndex);
       }
       (_this$dropdownMenuPlu3 = this.dropdownMenuPlugin) === null || _this$dropdownMenuPlu3 === void 0 ? void 0 : _this$dropdownMenuPlu3.close();
     }
@@ -870,10 +890,10 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "_createDataFilter",
     value: function _createDataFilter() {
-      var _this8 = this;
+      var _this9 = this;
       var conditionCollection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.conditionCollection;
       return new _dataFilter.default(conditionCollection, function (physicalColumn) {
-        return _this8.getDataMapAtColumn(physicalColumn);
+        return _this9.getDataMapAtColumn(physicalColumn);
       });
     }
 
@@ -1005,12 +1025,12 @@ var Filters = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this9 = this;
+      var _this10 = this;
       if (this.enabled) {
         this.components.forEach(function (component, key) {
           if (component !== null) {
             component.destroy();
-            _this9.components.set(key, null);
+            _this10.components.set(key, null);
           }
         });
         this.conditionCollection.destroy();