handsontable 14.5.0 → 14.6.0-next-4d69faf-20240924

package/plugins/contextMenu/menu/utils.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.filterSeparators = filterSeparators;
 exports.hasSubMenu = hasSubMenu;
 exports.isDisabled = isDisabled;
+exports.isItemCheckable = isItemCheckable;
 exports.isItemDisabled = isItemDisabled;
 exports.isItemHidden = isItemHidden;
 exports.isItemSelectionDisabled = isItemSelectionDisabled;
@@ -174,4 +175,14 @@ function filterSeparators(items) {
   result = popSeparators(result, separator);
   result = removeDuplicatedSeparators(result);
   return result;
+}
+
+/**
+ * Check if the provided element presents the checkboxable menu item.
+ *
+ * @param {object} itemToTest Item element.
+ * @returns {boolean}
+ */
+function isItemCheckable(itemToTest) {
+  return itemToTest.checkable === true;
 }

package/plugins/contextMenu/menu/utils.mjs

@@ -160,4 +160,14 @@ export function filterSeparators(items) {
   result = popSeparators(result, separator);
   result = removeDuplicatedSeparators(result);
   return result;
+}
+
+/**
+ * Check if the provided element presents the checkboxable menu item.
+ *
+ * @param {object} itemToTest Item element.
+ * @returns {boolean}
+ */
+export function isItemCheckable(itemToTest) {
+  return itemToTest.checkable === true;
 }

package/plugins/contextMenu/predefinedItems/alignment.js

@@ -34,15 +34,16 @@ function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htLeft');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htLeft') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htLeft')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -59,15 +60,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htCenter');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htCenter') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htCenter')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -84,15 +86,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htRight');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htRight') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htRight')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -109,15 +112,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htJustify');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htJustify') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htJustify')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -136,15 +140,16 @@ function alignmentItem() {
         name: _separator.KEY
       }, {
         key: `${KEY}:top`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htTop');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htTop') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htTop')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -161,15 +166,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htMiddle');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htMiddle') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htMiddle')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -186,15 +192,16 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
+        },
+        ariaChecked() {
+          return (0, _utils.hasSelectionAClass)(this, 'htBottom');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htBottom') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if ((0, _utils.hasSelectionAClass)(this, 'htBottom')) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;

package/plugins/contextMenu/predefinedItems/alignment.mjs

@@ -1,4 +1,4 @@
-import { align, getAlignmentClasses, checkSelectionConsistency, markLabelAsSelected } from "../utils.mjs";
+import { align, getAlignmentClasses, markLabelAsSelected, hasSelectionAClass } from "../utils.mjs";
 import { KEY as SEPARATOR } from "./separator.mjs";
 import * as C from "../../../i18n/constants.mjs";
 export const KEY = 'alignment';
@@ -28,15 +28,16 @@ export default function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htLeft');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htLeft') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htLeft')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -53,15 +54,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htCenter');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htCenter') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htCenter')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -78,15 +80,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htRight');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htRight') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htRight')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -103,15 +106,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htJustify');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htJustify') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htJustify')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -130,15 +134,16 @@ export default function alignmentItem() {
         name: SEPARATOR
       }, {
         key: `${KEY}:top`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htTop');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htTop') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htTop')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -155,15 +160,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htMiddle');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htMiddle') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htMiddle')) {
             label = markLabelAsSelected(label);
           }
           return label;
@@ -180,15 +186,16 @@ export default function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
+        checkable: true,
+        ariaLabel() {
+          return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
+        },
+        ariaChecked() {
+          return hasSelectionAClass(this, 'htBottom');
+        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          const hasClass = checkSelectionConsistency(this.getSelectedRange(), (row, col) => {
-            const className = this.getCellMeta(row, col).className;
-            if (className && className.indexOf('htBottom') !== -1) {
-              return true;
-            }
-          });
-          if (hasClass) {
+          if (hasSelectionAClass(this, 'htBottom')) {
             label = markLabelAsSelected(label);
           }
           return label;

package/plugins/contextMenu/predefinedItems/readOnly.js

@@ -15,6 +15,14 @@ const KEY = exports.KEY = 'make_read_only';
 function readOnlyItem() {
   return {
     key: KEY,
+    checkable: true,
+    ariaChecked() {
+      const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      return atLeastOneReadOnly;
+    },
+    ariaLabel() {
+      return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
+    },
     name() {
       let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
       const atLeastOneReadOnly = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);

package/plugins/contextMenu/predefinedItems/readOnly.mjs

@@ -9,6 +9,14 @@ export const KEY = 'make_read_only';
 export default function readOnlyItem() {
   return {
     key: KEY,
+    checkable: true,
+    ariaChecked() {
+      const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);
+      return atLeastOneReadOnly;
+    },
+    ariaLabel() {
+      return this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
+    },
     name() {
       let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_READ_ONLY);
       const atLeastOneReadOnly = checkSelectionConsistency(this.getSelectedRange(), (row, col) => this.getCellMeta(row, col).readOnly);

package/plugins/contextMenu/utils.js

@@ -4,7 +4,9 @@ exports.__esModule = true;
 exports.align = align;
 exports.checkSelectionConsistency = checkSelectionConsistency;
 exports.getAlignmentClasses = getAlignmentClasses;
+exports.getAlignmentComparatorByClass = getAlignmentComparatorByClass;
 exports.getDocumentOffsetByElement = getDocumentOffsetByElement;
+exports.hasSelectionAClass = hasSelectionAClass;
 exports.markLabelAsSelected = markLabelAsSelected;
 exports.prepareHorizontalAlignClass = prepareHorizontalAlignClass;
 exports.prepareVerticalAlignClass = prepareVerticalAlignClass;
@@ -151,4 +153,28 @@ function getDocumentOffsetByElement(elementToCheck, baseDocument) {
     offset.left = left;
   }
   return offset;
+}
+
+/**
+ * Prepares comparator function consumable by checkSelectionConsistency
+ * Comparator function checks if the cell has the provided class name.
+ *
+ * @param  {string} htClassName The class name to check.
+ * @returns {Function} Returns the comparator function.
+ * Use with .bind, .call or .apply to pass the Handsontable instance.
+ */
+function getAlignmentComparatorByClass(htClassName) {
+  return function (row, col) {
+    const className = this.getCellMeta(row, col).className;
+    return className && className.indexOf(htClassName) !== -1;
+  };
+}
+
+/**
+ * @param {object} hot Handsontable instance.
+ * @param {string} htClassName The class name to check.
+ * @returns {boolean} Returns true if at least one cell has the provided class name.
+ */
+function hasSelectionAClass(hot, htClassName) {
+  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
 }

package/plugins/contextMenu/utils.mjs

@@ -141,4 +141,28 @@ export function getDocumentOffsetByElement(elementToCheck, baseDocument) {
     offset.left = left;
   }
   return offset;
+}
+
+/**
+ * Prepares comparator function consumable by checkSelectionConsistency
+ * Comparator function checks if the cell has the provided class name.
+ *
+ * @param  {string} htClassName The class name to check.
+ * @returns {Function} Returns the comparator function.
+ * Use with .bind, .call or .apply to pass the Handsontable instance.
+ */
+export function getAlignmentComparatorByClass(htClassName) {
+  return function (row, col) {
+    const className = this.getCellMeta(row, col).className;
+    return className && className.indexOf(htClassName) !== -1;
+  };
+}
+
+/**
+ * @param {object} hot Handsontable instance.
+ * @param {string} htClassName The class name to check.
+ * @returns {boolean} Returns true if at least one cell has the provided class name.
+ */
+export function hasSelectionAClass(hot, htClassName) {
+  return checkSelectionConsistency(hot.getSelectedRange(), getAlignmentComparatorByClass(htClassName).bind(hot));
 }

package/plugins/copyPaste/copyPaste.js

@@ -553,12 +553,13 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCopy(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCopy, this, false);
     const data = this.getRangedData(this.copyableRanges);
@@ -576,7 +577,6 @@ class CopyPaste extends _base.BasePlugin {
       this.hot.runHooks('afterCopy', data, this.copyableRanges, copiedHeadersCount);
     }
     _classPrivateFieldSet(_copyMode, this, 'cells-only');
-    event.preventDefault();
   }
 
   /**
@@ -586,12 +586,13 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onCut(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target2;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCut, this, false);
     const rangedData = this.getRangedData(this.copyableRanges);
@@ -608,7 +609,6 @@ class CopyPaste extends _base.BasePlugin {
       this.hot.emptySelectedCells('CopyPaste.cut');
       this.hot.runHooks('afterCut', rangedData, this.copyableRanges);
     }
-    event.preventDefault();
   }
 
   /**
@@ -618,10 +618,10 @@ class CopyPaste extends _base.BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target3;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
     event.preventDefault();

package/plugins/copyPaste/copyPaste.mjs

@@ -549,12 +549,13 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCopy(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCopy, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCopy, this, false);
     const data = this.getRangedData(this.copyableRanges);
@@ -572,7 +573,6 @@ export class CopyPaste extends BasePlugin {
       this.hot.runHooks('afterCopy', data, this.copyableRanges, copiedHeadersCount);
     }
     _classPrivateFieldSet(_copyMode, this, 'cells-only');
-    event.preventDefault();
   }
 
   /**
@@ -582,12 +582,13 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onCut(event) {
-    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target2;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() && !_classPrivateFieldGet(_isTriggeredByCut, this) || this.isEditorOpened() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
+    event.preventDefault();
     this.setCopyableText();
     _classPrivateFieldSet(_isTriggeredByCut, this, false);
     const rangedData = this.getRangedData(this.copyableRanges);
@@ -604,7 +605,6 @@ export class CopyPaste extends BasePlugin {
       this.hot.emptySelectedCells('CopyPaste.cut');
       this.hot.runHooks('afterCut', rangedData, this.copyableRanges);
     }
-    event.preventDefault();
   }
 
   /**
@@ -614,10 +614,10 @@ export class CopyPaste extends BasePlugin {
    * @private
    */
   onPaste(event) {
-    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected()) {
-      return;
-    }
-    if (!this.hot.getSettings().outsideClickDeselects && event.target !== this.hot.rootDocument.body) {
+    var _event$target3;
+    const focusedElement = this.hot.getFocusManager().getRefocusElement();
+    const isHotInput = (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.hasAttribute('data-hot-input');
+    if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || event.target instanceof HTMLElement && (isHotInput && event.target !== focusedElement || !isHotInput && event.target !== this.hot.rootDocument.body)) {
       return;
     }
     event.preventDefault();

package/plugins/dropdownMenu/dropdownMenu.js

@@ -260,13 +260,16 @@ class DropdownMenu extends _base.BasePlugin {
           from
         } = this.hot.getSelectedRangeLast();
         const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
-        const target = this.hot.getCell(-1, from.col, true);
+        const target = this.hot.getCell(-1, from.col, true).querySelector(`.${BUTTON_CLASS_NAME}`);
         const rect = target.getBoundingClientRect();
         this.open({
           left: rect.left + offset.left,
           top: rect.top + target.offsetHeight + offset.top
         }, {
-          left: rect.width
+          left: rect.width,
+          right: 0,
+          above: 0,
+          below: 3
         });
         // Make sure the first item is selected (role=menuitem). Otherwise, screen readers
         // will block the Esc key for the whole menu.
@@ -433,9 +436,12 @@ function _onTableClick(event) {
     _classPrivateFieldSet(_isButtonClicked, this, false);
     this.open({
       left: rect.left + offset.left,
-      top: rect.top + event.target.offsetHeight + 3 + offset.top
+      top: rect.top + event.target.offsetHeight + offset.top
     }, {
-      left: rect.width
+      left: rect.width,
+      right: 0,
+      above: 0,
+      below: 3
     });
   }
 }