handsontable 16.0.1 → 16.1.0-next-abd8f2e-20250904

package/editors/autocompleteEditor/autocompleteEditor.js

@@ -3,12 +3,16 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.array.to-sorted.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.every.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/esnext.iterator.reduce.js");
 var _handsontableEditor = require("../handsontableEditor");
 var _array = require("../../helpers/array");
+var _object = require("../../helpers/object");
 var _element = require("../../helpers/dom/element");
 var _mixed = require("../../helpers/mixed");
 var _string = require("../../helpers/string");
@@ -70,72 +74,6 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
     _classPrivateFieldInitSpec(this, _focusDebounced, (0, _function.debounce)(() => {
       this.focus();
     }, 100));
-    /**
-     * Filters and sorts by relevance.
-     *
-     * @param {*} value The selected value.
-     * @param {string[]} choices The list of available choices.
-     * @param {boolean} caseSensitive Indicates if it's sorted by case.
-     * @returns {number[]} Array of indexes in original choices array.
-     */
-    _defineProperty(this, "sortByRelevance", function (value, choices, caseSensitive) {
-      const choicesRelevance = [];
-      const result = [];
-      const valueLength = value.length;
-      let choicesCount = choices.length;
-      let charsLeft;
-      let currentItem;
-      let i;
-      let valueIndex;
-      if (valueLength === 0) {
-        for (i = 0; i < choicesCount; i++) {
-          result.push(i);
-        }
-        return result;
-      }
-      for (i = 0; i < choicesCount; i++) {
-        currentItem = (0, _string.stripTags)((0, _mixed.stringify)(choices[i]));
-        if (caseSensitive) {
-          valueIndex = currentItem.indexOf(value);
-        } else {
-          const locale = this.cellProperties.locale;
-          valueIndex = currentItem.toLocaleLowerCase(locale).indexOf(value.toLocaleLowerCase(locale));
-        }
-        if (valueIndex !== -1) {
-          charsLeft = currentItem.length - valueIndex - valueLength;
-          choicesRelevance.push({
-            baseIndex: i,
-            index: valueIndex,
-            charsLeft,
-            value: currentItem
-          });
-        }
-      }
-      choicesRelevance.sort((a, b) => {
-        if (b.index === -1) {
-          return -1;
-        }
-        if (a.index === -1) {
-          return 1;
-        }
-        if (a.index < b.index) {
-          return -1;
-        } else if (b.index < a.index) {
-          return 1;
-        } else if (a.index === b.index) {
-          if (a.charsLeft < b.charsLeft) {
-            return -1;
-          } else if (a.charsLeft > b.charsLeft) {
-            return 1;
-          }
-        }
-        return 0;
-      });
-      for (i = 0, choicesCount = choicesRelevance.length; i < choicesCount; i++) {
-        result.push(choicesRelevance[i].baseIndex);
-      }
-      return result;
-    });
   }
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;
@@ -148,13 +86,14 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
   getValue() {
     const selectedValue = this.rawChoices.find(value => {
       const strippedValue = this.stripValueIfNeeded(value);
-      return strippedValue === this.TEXTAREA.value;
+      return (_assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, strippedValue) ? strippedValue.value : strippedValue) === this.TEXTAREA.value;
     });
     if ((0, _mixed.isDefined)(selectedValue)) {
       return selectedValue;
     }
     return this.TEXTAREA.value;
   }
+
   /**
    * Creates an editor's elements and adds necessary CSS classnames.
    */
@@ -182,6 +121,10 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
     if (this.hot.getSettings().ariaTags) {
       (0, _element.setAttribute)(this.TEXTAREA, [(0, _a11y.A11Y_EXPANDED)('false'), (0, _a11y.A11Y_CONTROLS)(`${_classPrivateFieldGet(_idPrefix, this)}-listbox-${row}-${col}`)]);
     }
+    this.htOptions = {
+      ...this.htOptions,
+      valueGetter: cellValue => _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, cellValue) ? cellValue.value : cellValue
+    };
   }
 
   /**
@@ -314,31 +257,32 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
     const endPos = (0, _element.getSelectionEndPosition)(this.TEXTAREA);
     const sortByRelevanceSetting = this.cellProperties.sortByRelevance;
     const filterSetting = this.cellProperties.filter;
-    let orderByRelevance = null;
+    const value = this.stripValueIfNeeded(this.getValue());
+    const comparableValue = _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, value) ? value.value : value;
     let highlightIndex = null;
     let choices = choicesList;
-    if (sortByRelevanceSetting) {
-      orderByRelevance = this.sortByRelevance(this.stripValueIfNeeded(this.getValue()), choices, this.cellProperties.filteringCaseSensitive);
+    if (!sortByRelevanceSetting) {
+      choices = choices.toSorted();
     }
-    const orderByRelevanceLength = Array.isArray(orderByRelevance) ? orderByRelevance.length : 0;
-    if (filterSetting === false) {
-      if (orderByRelevanceLength) {
-        highlightIndex = orderByRelevance[0];
-      }
-    } else {
-      const sorted = [];
-      for (let i = 0, choicesCount = choices.length; i < choicesCount; i++) {
-        if (sortByRelevanceSetting && orderByRelevanceLength <= i) {
+    const filteredChoiceIndexes = [];
+    const locale = this.cellProperties.locale;
+    const filteringCaseSensitive = this.cellProperties.filteringCaseSensitive;
+    const valueToMatch = filteringCaseSensitive ? comparableValue : comparableValue.toLocaleLowerCase(locale);
+    for (let i = 0; i < choices.length; i++) {
+      const currentItem = _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, choices[i]) ? (0, _string.stripTags)((0, _mixed.stringify)(choices[i].value)) : (0, _string.stripTags)((0, _mixed.stringify)(choices[i]));
+      const itemToMatch = filteringCaseSensitive ? currentItem : currentItem.toLocaleLowerCase(locale);
+      if (itemToMatch.indexOf(valueToMatch) !== -1) {
+        filteredChoiceIndexes.push(i);
+        if (filterSetting === false) {
           break;
         }
-        if (orderByRelevanceLength) {
-          sorted.push(choices[orderByRelevance[i]]);
-        } else {
-          sorted.push(choices[i]);
-        }
       }
-      highlightIndex = 0;
-      choices = sorted;
+    }
+    if (filterSetting === false) {
+      highlightIndex = filteredChoiceIndexes[0];
+    } else {
+      choices = filteredChoiceIndexes.map(index => choices[index]);
+      highlightIndex = choices.indexOf(valueToMatch) > -1 ? choices.indexOf(valueToMatch) : 0;
     }
     this.strippedChoices = choices;
     if (choices.length === 0) {
@@ -398,6 +342,7 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
       this.setDropdownHeight(tempHeight - lastRowHeight);
     }
   }
+
   /**
    * Updates width and height of the internal Handsontable's instance.
    *
@@ -497,39 +442,23 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
    *
    * @private
    * @param {string[]} values The value to sanitize.
-   * @returns {string[]}
+   * @returns {Array<string|{key: string, value: string}>}
    */
   stripValuesIfNeeded(values) {
     const {
       allowHtml
     } = this.cellProperties;
-    const stringifiedValues = (0, _array.arrayMap)(values, value => (0, _mixed.stringify)(value));
-    const strippedValues = (0, _array.arrayMap)(stringifiedValues, value => allowHtml ? value : (0, _string.stripTags)(value));
-    return strippedValues;
-  }
-
-  /**
-   * Captures use of arrow down and up to control their behaviour.
-   *
-   * @private
-   * @param {number} keyCode The keyboard keycode.
-   * @returns {boolean}
-   */
-  allowKeyEventPropagation(keyCode) {
-    const selectedRange = this.htEditor.getSelectedRangeLast();
-    const selected = {
-      row: selectedRange ? selectedRange.from.row : -1
-    };
-    let allowed = false;
-    if (keyCode === _unicode.KEY_CODES.ARROW_DOWN && selected.row > 0 && selected.row < this.htEditor.countRows() - 1) {
-      allowed = true;
-    }
-    if (keyCode === _unicode.KEY_CODES.ARROW_UP && selected.row > -1) {
-      allowed = true;
+    const processValue = value => (0, _mixed.stringify)(allowHtml ? value : (0, _string.stripTags)(value));
+    if (values.every(value => _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, value))) {
+      return values.map(value => {
+        return {
+          key: processValue(value.key),
+          value: processValue(value.value)
+        };
+      });
     }
-    return allowed;
+    return values.map(value => processValue(value));
   }
-
   /**
    * OnBeforeKeyDown callback.
    *
@@ -566,4 +495,13 @@ function _fixDropdownWidth() {
       width: this.getTargetEditorWidth() + (0, _element.getScrollbarWidth)(this.hot.rootDocument)
     });
   }
+}
+/**
+ * Checks if the value is a key/value object.
+ *
+ * @param {*} value The value to check.
+ * @returns {boolean}
+ */
+function _isKeyValueObject(value) {
+  return (0, _object.isObject)(value) && (0, _mixed.isDefined)(value.key) && (0, _mixed.isDefined)(value.value);
 }

package/editors/autocompleteEditor/autocompleteEditor.mjs

@@ -1,8 +1,11 @@
 import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.array.to-sorted.js";
 import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.every.js";
 import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.find.js";
+import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/esnext.iterator.reduce.js";
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -13,7 +16,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 import { HandsontableEditor } from "../handsontableEditor/index.mjs";
-import { arrayMap, pivot } from "../../helpers/array.mjs";
+import { pivot } from "../../helpers/array.mjs";
+import { isObject } from "../../helpers/object.mjs";
 import { addClass, getCaretPosition, getFractionalScalingCompensation, getScrollbarWidth, getSelectionEndPosition, outerWidth, setAttribute, setCaretPosition } from "../../helpers/dom/element.mjs";
 import { isDefined, stringify } from "../../helpers/mixed.mjs";
 import { stripTags } from "../../helpers/string.mjs";
@@ -67,72 +71,6 @@ export class AutocompleteEditor extends HandsontableEditor {
     _classPrivateFieldInitSpec(this, _focusDebounced, debounce(() => {
       this.focus();
     }, 100));
-    /**
-     * Filters and sorts by relevance.
-     *
-     * @param {*} value The selected value.
-     * @param {string[]} choices The list of available choices.
-     * @param {boolean} caseSensitive Indicates if it's sorted by case.
-     * @returns {number[]} Array of indexes in original choices array.
-     */
-    _defineProperty(this, "sortByRelevance", function (value, choices, caseSensitive) {
-      const choicesRelevance = [];
-      const result = [];
-      const valueLength = value.length;
-      let choicesCount = choices.length;
-      let charsLeft;
-      let currentItem;
-      let i;
-      let valueIndex;
-      if (valueLength === 0) {
-        for (i = 0; i < choicesCount; i++) {
-          result.push(i);
-        }
-        return result;
-      }
-      for (i = 0; i < choicesCount; i++) {
-        currentItem = stripTags(stringify(choices[i]));
-        if (caseSensitive) {
-          valueIndex = currentItem.indexOf(value);
-        } else {
-          const locale = this.cellProperties.locale;
-          valueIndex = currentItem.toLocaleLowerCase(locale).indexOf(value.toLocaleLowerCase(locale));
-        }
-        if (valueIndex !== -1) {
-          charsLeft = currentItem.length - valueIndex - valueLength;
-          choicesRelevance.push({
-            baseIndex: i,
-            index: valueIndex,
-            charsLeft,
-            value: currentItem
-          });
-        }
-      }
-      choicesRelevance.sort((a, b) => {
-        if (b.index === -1) {
-          return -1;
-        }
-        if (a.index === -1) {
-          return 1;
-        }
-        if (a.index < b.index) {
-          return -1;
-        } else if (b.index < a.index) {
-          return 1;
-        } else if (a.index === b.index) {
-          if (a.charsLeft < b.charsLeft) {
-            return -1;
-          } else if (a.charsLeft > b.charsLeft) {
-            return 1;
-          }
-        }
-        return 0;
-      });
-      for (i = 0, choicesCount = choicesRelevance.length; i < choicesCount; i++) {
-        result.push(choicesRelevance[i].baseIndex);
-      }
-      return result;
-    });
   }
   static get EDITOR_TYPE() {
     return EDITOR_TYPE;
@@ -145,13 +83,14 @@ export class AutocompleteEditor extends HandsontableEditor {
   getValue() {
     const selectedValue = this.rawChoices.find(value => {
       const strippedValue = this.stripValueIfNeeded(value);
-      return strippedValue === this.TEXTAREA.value;
+      return (_assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, strippedValue) ? strippedValue.value : strippedValue) === this.TEXTAREA.value;
     });
     if (isDefined(selectedValue)) {
       return selectedValue;
     }
     return this.TEXTAREA.value;
   }
+
   /**
    * Creates an editor's elements and adds necessary CSS classnames.
    */
@@ -179,6 +118,10 @@ export class AutocompleteEditor extends HandsontableEditor {
     if (this.hot.getSettings().ariaTags) {
       setAttribute(this.TEXTAREA, [A11Y_EXPANDED('false'), A11Y_CONTROLS(`${_classPrivateFieldGet(_idPrefix, this)}-listbox-${row}-${col}`)]);
     }
+    this.htOptions = {
+      ...this.htOptions,
+      valueGetter: cellValue => _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, cellValue) ? cellValue.value : cellValue
+    };
   }
 
   /**
@@ -311,31 +254,32 @@ export class AutocompleteEditor extends HandsontableEditor {
     const endPos = getSelectionEndPosition(this.TEXTAREA);
     const sortByRelevanceSetting = this.cellProperties.sortByRelevance;
     const filterSetting = this.cellProperties.filter;
-    let orderByRelevance = null;
+    const value = this.stripValueIfNeeded(this.getValue());
+    const comparableValue = _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, value) ? value.value : value;
     let highlightIndex = null;
     let choices = choicesList;
-    if (sortByRelevanceSetting) {
-      orderByRelevance = this.sortByRelevance(this.stripValueIfNeeded(this.getValue()), choices, this.cellProperties.filteringCaseSensitive);
+    if (!sortByRelevanceSetting) {
+      choices = choices.toSorted();
     }
-    const orderByRelevanceLength = Array.isArray(orderByRelevance) ? orderByRelevance.length : 0;
-    if (filterSetting === false) {
-      if (orderByRelevanceLength) {
-        highlightIndex = orderByRelevance[0];
-      }
-    } else {
-      const sorted = [];
-      for (let i = 0, choicesCount = choices.length; i < choicesCount; i++) {
-        if (sortByRelevanceSetting && orderByRelevanceLength <= i) {
+    const filteredChoiceIndexes = [];
+    const locale = this.cellProperties.locale;
+    const filteringCaseSensitive = this.cellProperties.filteringCaseSensitive;
+    const valueToMatch = filteringCaseSensitive ? comparableValue : comparableValue.toLocaleLowerCase(locale);
+    for (let i = 0; i < choices.length; i++) {
+      const currentItem = _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, choices[i]) ? stripTags(stringify(choices[i].value)) : stripTags(stringify(choices[i]));
+      const itemToMatch = filteringCaseSensitive ? currentItem : currentItem.toLocaleLowerCase(locale);
+      if (itemToMatch.indexOf(valueToMatch) !== -1) {
+        filteredChoiceIndexes.push(i);
+        if (filterSetting === false) {
           break;
         }
-        if (orderByRelevanceLength) {
-          sorted.push(choices[orderByRelevance[i]]);
-        } else {
-          sorted.push(choices[i]);
-        }
       }
-      highlightIndex = 0;
-      choices = sorted;
+    }
+    if (filterSetting === false) {
+      highlightIndex = filteredChoiceIndexes[0];
+    } else {
+      choices = filteredChoiceIndexes.map(index => choices[index]);
+      highlightIndex = choices.indexOf(valueToMatch) > -1 ? choices.indexOf(valueToMatch) : 0;
     }
     this.strippedChoices = choices;
     if (choices.length === 0) {
@@ -395,6 +339,7 @@ export class AutocompleteEditor extends HandsontableEditor {
       this.setDropdownHeight(tempHeight - lastRowHeight);
     }
   }
+
   /**
    * Updates width and height of the internal Handsontable's instance.
    *
@@ -494,39 +439,23 @@ export class AutocompleteEditor extends HandsontableEditor {
    *
    * @private
    * @param {string[]} values The value to sanitize.
-   * @returns {string[]}
+   * @returns {Array<string|{key: string, value: string}>}
    */
   stripValuesIfNeeded(values) {
     const {
       allowHtml
     } = this.cellProperties;
-    const stringifiedValues = arrayMap(values, value => stringify(value));
-    const strippedValues = arrayMap(stringifiedValues, value => allowHtml ? value : stripTags(value));
-    return strippedValues;
-  }
-
-  /**
-   * Captures use of arrow down and up to control their behaviour.
-   *
-   * @private
-   * @param {number} keyCode The keyboard keycode.
-   * @returns {boolean}
-   */
-  allowKeyEventPropagation(keyCode) {
-    const selectedRange = this.htEditor.getSelectedRangeLast();
-    const selected = {
-      row: selectedRange ? selectedRange.from.row : -1
-    };
-    let allowed = false;
-    if (keyCode === KEY_CODES.ARROW_DOWN && selected.row > 0 && selected.row < this.htEditor.countRows() - 1) {
-      allowed = true;
-    }
-    if (keyCode === KEY_CODES.ARROW_UP && selected.row > -1) {
-      allowed = true;
+    const processValue = value => stringify(allowHtml ? value : stripTags(value));
+    if (values.every(value => _assertClassBrand(_AutocompleteEditor_brand, this, _isKeyValueObject).call(this, value))) {
+      return values.map(value => {
+        return {
+          key: processValue(value.key),
+          value: processValue(value.value)
+        };
+      });
     }
-    return allowed;
+    return values.map(value => processValue(value));
   }
-
   /**
    * OnBeforeKeyDown callback.
    *
@@ -562,4 +491,13 @@ function _fixDropdownWidth() {
       width: this.getTargetEditorWidth() + getScrollbarWidth(this.hot.rootDocument)
     });
   }
+}
+/**
+ * Checks if the value is a key/value object.
+ *
+ * @param {*} value The value to check.
+ * @returns {boolean}
+ */
+function _isKeyValueObject(value) {
+  return isObject(value) && isDefined(value.key) && isDefined(value.value);
 }

package/editors/baseEditor/baseEditor.js

@@ -196,11 +196,13 @@ class BaseEditor {
 
     // if ctrl+enter and multiple cells selected, behave like Excel (finish editing and apply to all cells)
     if (ctrlDown) {
-      const selectedLast = this.hot.getSelectedLast();
-      visualRowFrom = Math.max(Math.min(selectedLast[0], selectedLast[2]), 0); // Math.max eliminate headers coords.
-      visualColumnFrom = Math.max(Math.min(selectedLast[1], selectedLast[3]), 0); // Math.max eliminate headers coords.
-      visualRowTo = Math.max(selectedLast[0], selectedLast[2]);
-      visualColumnTo = Math.max(selectedLast[1], selectedLast[3]);
+      const activeRange = this.hot.getSelectedRangeActive();
+      const topStartCorner = activeRange.getTopStartCorner();
+      const bottomEndCorner = activeRange.getBottomEndCorner();
+      visualRowFrom = topStartCorner.row;
+      visualColumnFrom = topStartCorner.col;
+      visualRowTo = bottomEndCorner.row;
+      visualColumnTo = bottomEndCorner.col;
     } else {
       [visualRowFrom, visualColumnFrom, visualRowTo, visualColumnTo] = [this.row, this.col, null, null];
     }
@@ -234,7 +236,8 @@ class BaseEditor {
       // Set the editor value only in the full edit mode. In other mode the focusable element has to be empty,
       // otherwise IME (editor for Asia users) doesn't work.
       if (this.isInFullEditMode()) {
-        const stringifiedInitialValue = typeof newInitialValue === 'string' ? newInitialValue : (0, _mixed.stringify)(this.originalValue);
+        const originalValue = this.cellProperties.valueGetter ? this.cellProperties.valueGetter(this.originalValue) : this.originalValue;
+        const stringifiedInitialValue = typeof newInitialValue === 'string' ? newInitialValue : (0, _mixed.stringify)(originalValue);
         this.setValue(stringifiedInitialValue);
       }
       this.open(event);
@@ -251,6 +254,7 @@ class BaseEditor {
       this.hot.removeHook('afterScroll', openEditor);
       openEditor();
     }
+    this.addHook('beforeDialogShow', () => this.cancelChanges());
   }
 
   /**

package/editors/baseEditor/baseEditor.mjs

@@ -192,11 +192,13 @@ export class BaseEditor {
 
     // if ctrl+enter and multiple cells selected, behave like Excel (finish editing and apply to all cells)
     if (ctrlDown) {
-      const selectedLast = this.hot.getSelectedLast();
-      visualRowFrom = Math.max(Math.min(selectedLast[0], selectedLast[2]), 0); // Math.max eliminate headers coords.
-      visualColumnFrom = Math.max(Math.min(selectedLast[1], selectedLast[3]), 0); // Math.max eliminate headers coords.
-      visualRowTo = Math.max(selectedLast[0], selectedLast[2]);
-      visualColumnTo = Math.max(selectedLast[1], selectedLast[3]);
+      const activeRange = this.hot.getSelectedRangeActive();
+      const topStartCorner = activeRange.getTopStartCorner();
+      const bottomEndCorner = activeRange.getBottomEndCorner();
+      visualRowFrom = topStartCorner.row;
+      visualColumnFrom = topStartCorner.col;
+      visualRowTo = bottomEndCorner.row;
+      visualColumnTo = bottomEndCorner.col;
     } else {
       [visualRowFrom, visualColumnFrom, visualRowTo, visualColumnTo] = [this.row, this.col, null, null];
     }
@@ -230,7 +232,8 @@ export class BaseEditor {
       // Set the editor value only in the full edit mode. In other mode the focusable element has to be empty,
       // otherwise IME (editor for Asia users) doesn't work.
       if (this.isInFullEditMode()) {
-        const stringifiedInitialValue = typeof newInitialValue === 'string' ? newInitialValue : stringify(this.originalValue);
+        const originalValue = this.cellProperties.valueGetter ? this.cellProperties.valueGetter(this.originalValue) : this.originalValue;
+        const stringifiedInitialValue = typeof newInitialValue === 'string' ? newInitialValue : stringify(originalValue);
         this.setValue(stringifiedInitialValue);
       }
       this.open(event);
@@ -247,6 +250,7 @@ export class BaseEditor {
       this.hot.removeHook('afterScroll', openEditor);
       openEditor();
     }
+    this.addHook('beforeDialogShow', () => this.cancelChanges());
   }
 
   /**

package/editors/handsontableEditor/handsontableEditor.js

@@ -168,7 +168,7 @@ class HandsontableEditor extends _textEditor.TextEditor {
       // if focus is still in the HOT editor
       this.hot.listen(); // return the focus to the parent HOT instance
     }
-    if (this.htEditor && this.htEditor.getSelectedLast()) {
+    if (this.htEditor && this.htEditor.getSelectedActive()) {
       const value = this.htEditor.getValue();
       if (value !== undefined) {
         // if the value is undefined then it means we don't want to set the value
@@ -387,14 +387,14 @@ class HandsontableEditor extends _textEditor.TextEditor {
         const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
-        if (!innerHOT.getSelectedLast() && this.isFlippedVertically) {
+        if (!innerHOT.getSelectedActive() && this.isFlippedVertically) {
           rowToSelect = innerHOT.countRows() - 1;
-        } else if (innerHOT.getSelectedLast()) {
+        } else if (innerHOT.getSelectedActive()) {
           if (this.isFlippedVertically) {
-            selectedRow = innerHOT.getSelectedLast()[0];
+            selectedRow = innerHOT.getSelectedActive()[0];
             rowToSelect = Math.max(0, selectedRow - 1);
           } else {
-            selectedRow = innerHOT.getSelectedLast()[0];
+            selectedRow = innerHOT.getSelectedActive()[0];
             rowToSelect = selectedRow - 1;
           }
         }
@@ -407,14 +407,14 @@ class HandsontableEditor extends _textEditor.TextEditor {
         const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
-        if (!innerHOT.getSelectedLast() && !this.isFlippedVertically) {
+        if (!innerHOT.getSelectedActive() && !this.isFlippedVertically) {
           rowToSelect = 0;
-        } else if (innerHOT.getSelectedLast()) {
+        } else if (innerHOT.getSelectedActive()) {
           if (this.isFlippedVertically) {
-            rowToSelect = innerHOT.getSelectedLast()[0] + 1;
+            rowToSelect = innerHOT.getSelectedActive()[0] + 1;
           } else if (!this.isFlippedVertically) {
             const lastRow = innerHOT.countRows() - 1;
-            selectedRow = innerHOT.getSelectedLast()[0];
+            selectedRow = innerHOT.getSelectedActive()[0];
             rowToSelect = Math.min(lastRow, selectedRow + 1);
           }
         }

package/editors/handsontableEditor/handsontableEditor.mjs

@@ -165,7 +165,7 @@ export class HandsontableEditor extends TextEditor {
       // if focus is still in the HOT editor
       this.hot.listen(); // return the focus to the parent HOT instance
     }
-    if (this.htEditor && this.htEditor.getSelectedLast()) {
+    if (this.htEditor && this.htEditor.getSelectedActive()) {
       const value = this.htEditor.getValue();
       if (value !== undefined) {
         // if the value is undefined then it means we don't want to set the value
@@ -384,14 +384,14 @@ export class HandsontableEditor extends TextEditor {
         const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
-        if (!innerHOT.getSelectedLast() && this.isFlippedVertically) {
+        if (!innerHOT.getSelectedActive() && this.isFlippedVertically) {
           rowToSelect = innerHOT.countRows() - 1;
-        } else if (innerHOT.getSelectedLast()) {
+        } else if (innerHOT.getSelectedActive()) {
           if (this.isFlippedVertically) {
-            selectedRow = innerHOT.getSelectedLast()[0];
+            selectedRow = innerHOT.getSelectedActive()[0];
             rowToSelect = Math.max(0, selectedRow - 1);
           } else {
-            selectedRow = innerHOT.getSelectedLast()[0];
+            selectedRow = innerHOT.getSelectedActive()[0];
             rowToSelect = selectedRow - 1;
           }
         }
@@ -404,14 +404,14 @@ export class HandsontableEditor extends TextEditor {
         const innerHOT = this.htEditor;
         let rowToSelect;
         let selectedRow;
-        if (!innerHOT.getSelectedLast() && !this.isFlippedVertically) {
+        if (!innerHOT.getSelectedActive() && !this.isFlippedVertically) {
           rowToSelect = 0;
-        } else if (innerHOT.getSelectedLast()) {
+        } else if (innerHOT.getSelectedActive()) {
           if (this.isFlippedVertically) {
-            rowToSelect = innerHOT.getSelectedLast()[0] + 1;
+            rowToSelect = innerHOT.getSelectedActive()[0] + 1;
           } else if (!this.isFlippedVertically) {
             const lastRow = innerHOT.countRows() - 1;
-            selectedRow = innerHOT.getSelectedLast()[0];
+            selectedRow = innerHOT.getSelectedActive()[0];
             rowToSelect = Math.min(lastRow, selectedRow + 1);
           }
         }

package/editors/textEditor/textEditor.js

@@ -346,13 +346,6 @@ class TextEditor extends _baseEditor.BaseEditor {
     });
   }
 
-  /**
-   * Ugly hack for autocompleteEditor.
-   *
-   * @private
-   */
-  allowKeyEventPropagation() {}
-
   /**
    * Destroys the internal event manager and clears attached hooks.
    *