handsontable 18.0.0 → 18.1.0-rc7

package/editorManager.js

@@ -11,12 +11,48 @@ Object.defineProperty(exports, "default", {
 const _unicode = require("./helpers/unicode");
 const _event = require("./helpers/dom/event");
 const _registry = require("./editors/registry");
+const _baseEditor = require("./editors/baseEditor");
 const _eventManager = /*#__PURE__*/ _interop_require_default(require("./eventManager"));
 function _check_private_redeclaration(obj, privateCollection) {
     if (privateCollection.has(obj)) {
         throw new TypeError("Cannot initialize the same private elements twice on an object");
     }
 }
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) {
+        descriptor.set.call(receiver, value);
+    } else {
+        if (!descriptor.writable) {
+            throw new TypeError("attempted to set read only private field");
+        }
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function _class_private_method_get(receiver, privateSet, fn) {
     if (!privateSet.has(receiver)) {
         throw new TypeError("attempted to get private field on non-instance");
@@ -33,6 +69,59 @@ function _interop_require_default(obj) {
     };
 }
 var /**
+   * Whether a close of an editor stranded on a hidden cell is already pending, either scheduled on
+   * the next tick or waiting on an async validator to settle. Suppresses duplicate work when one
+   * page turn emits the cache-update hook more than once.
+   *
+   * @type {boolean}
+   */ _hiddenCellCloseArmed = /*#__PURE__*/ new WeakMap(), /**
+   * Checks whether the cell at the given VISUAL coordinates is hidden by a hiding index map
+   * (Pagination's page map, `hiddenRows`, `hiddenColumns`).
+   *
+   * `IndexMapper#isHidden()` is keyed by PHYSICAL index, so both coordinates are converted. The two
+   * index spaces coincide only while no sorting, move or trimming map is active; under
+   * `columnSorting` a raw visual index reads a different row's hidden flag, which would both tear
+   * down an edit on a fully visible cell and miss the hidden cell this check exists for.
+   *
+   * @param {number} visualRow The visual row index.
+   * @param {number} visualColumn The visual column index.
+   * @returns {boolean}
+   */ _isCellHidden = /*#__PURE__*/ new WeakSet(), /**
+   * Ends an edit when a HIDING index map removes the edited cell from the DOM while the editor is
+   * still open.
+   *
+   * Pagination turning the page, `hiddenRows` and `hiddenColumns` all register a `hiding` map,
+   * which drops the cell from the render while its visual index stays valid. The editor used to
+   * stay open, pinned to its original pixel position over whatever row slid into that spot, still
+   * bound to its original coordinates, and to commit only on a later click - to a row the user
+   * could no longer see.
+   *
+   * This lives in the manager rather than in an editor so that it covers every editor.
+   * `SelectEditor` and `MultiSelectEditor` extend `BaseEditor` directly, as does anything built
+   * through `editors/factory.ts`, so an editor-level hook reaches none of them.
+   *
+   * Test on `isHidden()`, NOT on whether the `TD` still resolves. A cell merely scrolled out of the
+   * rendered window has no `TD` either, and closing there would silently commit an in-progress edit
+   * on every scroll away. That is long-standing behavior in the other direction: the editor hides
+   * itself on scroll but keeps `state` at `EDITING`, so the edit survives until the user scrolls
+   * back. These hooks never fire on scroll, so that case cannot reach here at all.
+   *
+   * A TRIMMING map (Filters, `trimRows`) is deliberately out of scope. It collapses the visual
+   * index space instead of preserving it, so the edited coordinates silently rebind to a different
+   * row that is still rendered and `isHidden()` reads `false`. That defect predates this method.
+   *
+   * The edit is finished rather than cancelled, which for most editors means it is COMMITTED - the
+   * same outcome clicking the pager already produces, since that is an outside click and therefore
+   * deselects. The final say belongs to the editor: `DropdownEditor#finishEditing()` rewrites the
+   * flag to a discard when the active range no longer contains the edited cell, and
+   * `selection.commit()` runs before these hooks, so a dropdown can legitimately discard here.
+   * Where the commit is REJECTED - a validator returned `false` under `allowInvalid: false`, which
+   * re-selects the hidden cell and restores `EDITING` - the edit is reverted instead, because an
+   * editor surviving on a cell the user cannot see is the bug being fixed.
+   *
+   * @param {BaseEditor} [pendingEditor] The editor this call is retrying for. Supplied only by the
+   *                                     async-validation retry below.
+   */ _closeEditorWhenCellHidden = /*#__PURE__*/ new WeakSet(), /**
    * OnAfterDocumentKeyDown callback.
    *
    * @param {KeyboardEvent} event The keyboard event object.
@@ -56,6 +145,11 @@ var /**
     /**
    * Prepare text input to be displayed at given grid cell.
    */ prepareEditor() {
+        // A new edit cycle always re-arms the hidden-cell guard. Without this the latch is
+        // instance-scoped, so one editor left stuck in `WAITING` with no `postAfterValidate` (a
+        // `beforeChange` that cancels the change, for instance) would disable the guard for the rest
+        // of the instance's life rather than for that one edit.
+        _class_private_field_set(this, _hiddenCellCloseArmed, false);
         if (this.activeEditor && this.activeEditor.isWaiting()) {
             this.closeEditor(false, false, (dataSaved)=>{
                 if (dataSaved) {
@@ -191,9 +285,7 @@ var /**
         if (row === null || col === null) {
             return false;
         }
-        const { rowIndexMapper, columnIndexMapper } = this.hot;
-        const isCellHidden = rowIndexMapper.isHidden(this.hot.toPhysicalRow(row)) || columnIndexMapper.isHidden(this.hot.toPhysicalColumn(col));
-        if (this.cellProperties.readOnly || !editorClass || isCellHidden) {
+        if (this.cellProperties.readOnly || !editorClass || _class_private_method_get(this, _isCellHidden, isCellHidden).call(this, row, col)) {
             return false;
         }
         return true;
@@ -231,23 +323,80 @@ var /**
    * @param {TableMeta} tableMeta The table meta instance.
    * @param {Selection} selection The selection instance.
    */ constructor(hotInstance, tableMeta, selection){
+        _class_private_method_init(this, _isCellHidden);
+        _class_private_method_init(this, _closeEditorWhenCellHidden);
         _class_private_method_init(this, _onAfterDocumentKeyDown);
         _class_private_method_init(this, _onCellDblClick);
+        _class_private_field_init(this, _hiddenCellCloseArmed, {
+            writable: true,
+            value: void 0
+        });
         /**
    * Determines if EditorManager is destroyed.
    *
    * @private
    * @type {boolean}
    */ this.destroyed = false;
+        _class_private_field_set(this, _hiddenCellCloseArmed, false);
         this.hot = hotInstance;
         this.tableMeta = tableMeta;
         this.selection = selection;
         this.eventManager = new _eventManager.default(hotInstance);
         this.hot.addHook('afterDocumentKeyDown', (event)=>_class_private_method_get(this, _onAfterDocumentKeyDown, onAfterDocumentKeyDown).call(this, event));
         this.hot.addHook('beforeCompositionStart', (event)=>_class_private_method_get(this, _onAfterDocumentKeyDown, onAfterDocumentKeyDown).call(this, event));
+        this.hot.addHook('afterRowSequenceCacheUpdate', ()=>_class_private_method_get(this, _closeEditorWhenCellHidden, closeEditorWhenCellHidden).call(this));
+        this.hot.addHook('afterColumnSequenceCacheUpdate', ()=>_class_private_method_get(this, _closeEditorWhenCellHidden, closeEditorWhenCellHidden).call(this));
         this.hot.view._wt.update('onCellDblClick', (event, coords, _elem)=>_class_private_method_get(this, _onCellDblClick, onCellDblClick).call(this, event, coords));
     }
 }
+function isCellHidden(visualRow, visualColumn) {
+    return this.hot.rowIndexMapper.isHidden(this.hot.toPhysicalRow(visualRow)) || this.hot.columnIndexMapper.isHidden(this.hot.toPhysicalColumn(visualColumn));
+}
+function closeEditorWhenCellHidden(pendingEditor) {
+    // Fall back to the captured reference: a rejected validation re-selects the hidden cell, which
+    // drives `prepareEditor()` -> `clearActiveEditor()`, so `this.activeEditor` can already be gone
+    // by the time a retry lands even though the editor object is still open.
+    const editor = this.activeEditor ?? pendingEditor;
+    if (!editor || editor.row === null || editor.col === null || !_class_private_method_get(this, _isCellHidden, isCellHidden).call(this, editor.row, editor.col)) {
+        return;
+    }
+    // `finishEditing()` is a silent no-op while an async validator is in flight, which would leave
+    // the editor orphaned. Re-enter at the top once validation settles rather than assuming the
+    // wait is over: `postAfterValidate` is instance-wide and may fire for an unrelated cell.
+    if (editor.isWaiting()) {
+        if (!_class_private_field_get(this, _hiddenCellCloseArmed)) {
+            _class_private_field_set(this, _hiddenCellCloseArmed, true);
+            this.hot.addHookOnce('postAfterValidate', ()=>{
+                _class_private_field_set(this, _hiddenCellCloseArmed, false);
+                this.hot._registerTimeout(()=>_class_private_method_get(this, _closeEditorWhenCellHidden, closeEditorWhenCellHidden).call(this, editor), 0);
+            });
+        }
+        return;
+    }
+    if (editor.state !== _baseEditor.EDITOR_STATE.EDITING || _class_private_field_get(this, _hiddenCellCloseArmed)) {
+        return;
+    }
+    _class_private_field_set(this, _hiddenCellCloseArmed, true);
+    // Committing writes through `setDataAtCell`, which re-enters this manager (`closeEditor()`,
+    // `render()`, `prepareEditor()`). Defer so the write never lands inside the cache update that
+    // is still unwinding.
+    this.hot._registerTimeout(()=>{
+        _class_private_field_set(this, _hiddenCellCloseArmed, false);
+        if (this.destroyed || editor.state !== _baseEditor.EDITOR_STATE.EDITING || editor.row === null || editor.col === null || !_class_private_method_get(this, _isCellHidden, isCellHidden).call(this, editor.row, editor.col)) {
+            return;
+        }
+        // Drive the captured editor directly rather than `closeEditor()`, for the same reason as
+        // the fallback above: `this.activeEditor` may already have been cleared.
+        editor.finishEditing(false, false, (dataSaved)=>{
+            if (dataSaved) {
+                return;
+            }
+            // Nothing is lost by reverting - the rejected value never reached the dataset,
+            // `validateChanges()` splices it out first.
+            editor.finishEditing(true);
+        });
+    }, 0);
+}
 function onAfterDocumentKeyDown(event) {
     const selection = this.hot.getSelectedRangeActive();
     if (!this.hot.isListening() || !selection || selection.highlight.isHeader() || (0, _event.isImmediatePropagationStopped)(event)) {

package/editorManager.mjs

@@ -3,6 +3,41 @@ function _check_private_redeclaration(obj, privateCollection) {
         throw new TypeError("Cannot initialize the same private elements twice on an object");
     }
 }
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) {
+        descriptor.set.call(receiver, value);
+    } else {
+        if (!descriptor.writable) {
+            throw new TypeError("attempted to set read only private field");
+        }
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function _class_private_method_get(receiver, privateSet, fn) {
     if (!privateSet.has(receiver)) {
         throw new TypeError("attempted to get private field on non-instance");
@@ -16,8 +51,62 @@ function _class_private_method_init(obj, privateSet) {
 import { isFunctionKey, isCtrlMetaKey } from './helpers/unicode.mjs';
 import { isImmediatePropagationStopped } from './helpers/dom/event.mjs';
 import { getEditorInstance } from './editors/registry.mjs';
+import { EDITOR_STATE } from './editors/baseEditor/index.mjs';
 import EventManager from './eventManager.mjs';
 var /**
+   * Whether a close of an editor stranded on a hidden cell is already pending, either scheduled on
+   * the next tick or waiting on an async validator to settle. Suppresses duplicate work when one
+   * page turn emits the cache-update hook more than once.
+   *
+   * @type {boolean}
+   */ _hiddenCellCloseArmed = /*#__PURE__*/ new WeakMap(), /**
+   * Checks whether the cell at the given VISUAL coordinates is hidden by a hiding index map
+   * (Pagination's page map, `hiddenRows`, `hiddenColumns`).
+   *
+   * `IndexMapper#isHidden()` is keyed by PHYSICAL index, so both coordinates are converted. The two
+   * index spaces coincide only while no sorting, move or trimming map is active; under
+   * `columnSorting` a raw visual index reads a different row's hidden flag, which would both tear
+   * down an edit on a fully visible cell and miss the hidden cell this check exists for.
+   *
+   * @param {number} visualRow The visual row index.
+   * @param {number} visualColumn The visual column index.
+   * @returns {boolean}
+   */ _isCellHidden = /*#__PURE__*/ new WeakSet(), /**
+   * Ends an edit when a HIDING index map removes the edited cell from the DOM while the editor is
+   * still open.
+   *
+   * Pagination turning the page, `hiddenRows` and `hiddenColumns` all register a `hiding` map,
+   * which drops the cell from the render while its visual index stays valid. The editor used to
+   * stay open, pinned to its original pixel position over whatever row slid into that spot, still
+   * bound to its original coordinates, and to commit only on a later click - to a row the user
+   * could no longer see.
+   *
+   * This lives in the manager rather than in an editor so that it covers every editor.
+   * `SelectEditor` and `MultiSelectEditor` extend `BaseEditor` directly, as does anything built
+   * through `editors/factory.ts`, so an editor-level hook reaches none of them.
+   *
+   * Test on `isHidden()`, NOT on whether the `TD` still resolves. A cell merely scrolled out of the
+   * rendered window has no `TD` either, and closing there would silently commit an in-progress edit
+   * on every scroll away. That is long-standing behavior in the other direction: the editor hides
+   * itself on scroll but keeps `state` at `EDITING`, so the edit survives until the user scrolls
+   * back. These hooks never fire on scroll, so that case cannot reach here at all.
+   *
+   * A TRIMMING map (Filters, `trimRows`) is deliberately out of scope. It collapses the visual
+   * index space instead of preserving it, so the edited coordinates silently rebind to a different
+   * row that is still rendered and `isHidden()` reads `false`. That defect predates this method.
+   *
+   * The edit is finished rather than cancelled, which for most editors means it is COMMITTED - the
+   * same outcome clicking the pager already produces, since that is an outside click and therefore
+   * deselects. The final say belongs to the editor: `DropdownEditor#finishEditing()` rewrites the
+   * flag to a discard when the active range no longer contains the edited cell, and
+   * `selection.commit()` runs before these hooks, so a dropdown can legitimately discard here.
+   * Where the commit is REJECTED - a validator returned `false` under `allowInvalid: false`, which
+   * re-selects the hidden cell and restores `EDITING` - the edit is reverted instead, because an
+   * editor surviving on a cell the user cannot see is the bug being fixed.
+   *
+   * @param {BaseEditor} [pendingEditor] The editor this call is retrying for. Supplied only by the
+   *                                     async-validation retry below.
+   */ _closeEditorWhenCellHidden = /*#__PURE__*/ new WeakSet(), /**
    * OnAfterDocumentKeyDown callback.
    *
    * @param {KeyboardEvent} event The keyboard event object.
@@ -41,6 +130,11 @@ var /**
     /**
    * Prepare text input to be displayed at given grid cell.
    */ prepareEditor() {
+        // A new edit cycle always re-arms the hidden-cell guard. Without this the latch is
+        // instance-scoped, so one editor left stuck in `WAITING` with no `postAfterValidate` (a
+        // `beforeChange` that cancels the change, for instance) would disable the guard for the rest
+        // of the instance's life rather than for that one edit.
+        _class_private_field_set(this, _hiddenCellCloseArmed, false);
         if (this.activeEditor && this.activeEditor.isWaiting()) {
             this.closeEditor(false, false, (dataSaved)=>{
                 if (dataSaved) {
@@ -176,9 +270,7 @@ var /**
         if (row === null || col === null) {
             return false;
         }
-        const { rowIndexMapper, columnIndexMapper } = this.hot;
-        const isCellHidden = rowIndexMapper.isHidden(this.hot.toPhysicalRow(row)) || columnIndexMapper.isHidden(this.hot.toPhysicalColumn(col));
-        if (this.cellProperties.readOnly || !editorClass || isCellHidden) {
+        if (this.cellProperties.readOnly || !editorClass || _class_private_method_get(this, _isCellHidden, isCellHidden).call(this, row, col)) {
             return false;
         }
         return true;
@@ -216,23 +308,80 @@ var /**
    * @param {TableMeta} tableMeta The table meta instance.
    * @param {Selection} selection The selection instance.
    */ constructor(hotInstance, tableMeta, selection){
+        _class_private_method_init(this, _isCellHidden);
+        _class_private_method_init(this, _closeEditorWhenCellHidden);
         _class_private_method_init(this, _onAfterDocumentKeyDown);
         _class_private_method_init(this, _onCellDblClick);
+        _class_private_field_init(this, _hiddenCellCloseArmed, {
+            writable: true,
+            value: void 0
+        });
         /**
    * Determines if EditorManager is destroyed.
    *
    * @private
    * @type {boolean}
    */ this.destroyed = false;
+        _class_private_field_set(this, _hiddenCellCloseArmed, false);
         this.hot = hotInstance;
         this.tableMeta = tableMeta;
         this.selection = selection;
         this.eventManager = new EventManager(hotInstance);
         this.hot.addHook('afterDocumentKeyDown', (event)=>_class_private_method_get(this, _onAfterDocumentKeyDown, onAfterDocumentKeyDown).call(this, event));
         this.hot.addHook('beforeCompositionStart', (event)=>_class_private_method_get(this, _onAfterDocumentKeyDown, onAfterDocumentKeyDown).call(this, event));
+        this.hot.addHook('afterRowSequenceCacheUpdate', ()=>_class_private_method_get(this, _closeEditorWhenCellHidden, closeEditorWhenCellHidden).call(this));
+        this.hot.addHook('afterColumnSequenceCacheUpdate', ()=>_class_private_method_get(this, _closeEditorWhenCellHidden, closeEditorWhenCellHidden).call(this));
         this.hot.view._wt.update('onCellDblClick', (event, coords, _elem)=>_class_private_method_get(this, _onCellDblClick, onCellDblClick).call(this, event, coords));
     }
 }
+function isCellHidden(visualRow, visualColumn) {
+    return this.hot.rowIndexMapper.isHidden(this.hot.toPhysicalRow(visualRow)) || this.hot.columnIndexMapper.isHidden(this.hot.toPhysicalColumn(visualColumn));
+}
+function closeEditorWhenCellHidden(pendingEditor) {
+    // Fall back to the captured reference: a rejected validation re-selects the hidden cell, which
+    // drives `prepareEditor()` -> `clearActiveEditor()`, so `this.activeEditor` can already be gone
+    // by the time a retry lands even though the editor object is still open.
+    const editor = this.activeEditor ?? pendingEditor;
+    if (!editor || editor.row === null || editor.col === null || !_class_private_method_get(this, _isCellHidden, isCellHidden).call(this, editor.row, editor.col)) {
+        return;
+    }
+    // `finishEditing()` is a silent no-op while an async validator is in flight, which would leave
+    // the editor orphaned. Re-enter at the top once validation settles rather than assuming the
+    // wait is over: `postAfterValidate` is instance-wide and may fire for an unrelated cell.
+    if (editor.isWaiting()) {
+        if (!_class_private_field_get(this, _hiddenCellCloseArmed)) {
+            _class_private_field_set(this, _hiddenCellCloseArmed, true);
+            this.hot.addHookOnce('postAfterValidate', ()=>{
+                _class_private_field_set(this, _hiddenCellCloseArmed, false);
+                this.hot._registerTimeout(()=>_class_private_method_get(this, _closeEditorWhenCellHidden, closeEditorWhenCellHidden).call(this, editor), 0);
+            });
+        }
+        return;
+    }
+    if (editor.state !== EDITOR_STATE.EDITING || _class_private_field_get(this, _hiddenCellCloseArmed)) {
+        return;
+    }
+    _class_private_field_set(this, _hiddenCellCloseArmed, true);
+    // Committing writes through `setDataAtCell`, which re-enters this manager (`closeEditor()`,
+    // `render()`, `prepareEditor()`). Defer so the write never lands inside the cache update that
+    // is still unwinding.
+    this.hot._registerTimeout(()=>{
+        _class_private_field_set(this, _hiddenCellCloseArmed, false);
+        if (this.destroyed || editor.state !== EDITOR_STATE.EDITING || editor.row === null || editor.col === null || !_class_private_method_get(this, _isCellHidden, isCellHidden).call(this, editor.row, editor.col)) {
+            return;
+        }
+        // Drive the captured editor directly rather than `closeEditor()`, for the same reason as
+        // the fallback above: `this.activeEditor` may already have been cleared.
+        editor.finishEditing(false, false, (dataSaved)=>{
+            if (dataSaved) {
+                return;
+            }
+            // Nothing is lost by reverting - the rejected value never reached the dataset,
+            // `validateChanges()` splices it out first.
+            editor.finishEditing(true);
+        });
+    }, 0);
+}
 function onAfterDocumentKeyDown(event) {
     const selection = this.hot.getSelectedRangeActive();
     if (!this.hot.isListening() || !selection || selection.highlight.isHeader() || isImmediatePropagationStopped(event)) {

package/editors/autocompleteEditor/autocompleteEditor.js

@@ -168,6 +168,14 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
                 (0, _element.outerWidth)(this.TEXTAREA) - 2
             ] : undefined,
             autoColumnSize: true,
+            // With `trimDropdown: false` the list column is sized from its content by
+            // AutoColumnSize, so short options produced a list narrower than the edited
+            // cell (#13180). Floor the column at the cell width: the option rows stay
+            // full-width click targets, and `getTargetEditorWidth()` (which reads
+            // `getColWidth(0)`) widens the outer container to match automatically.
+            modifyColWidth: trimDropdown ? undefined : (width)=>{
+                return Math.max(width ?? 0, (0, _element.outerWidth)(this.TEXTAREA) - 2);
+            },
             renderer: (hotInstance, TD, row, col, prop, value, cellProperties)=>{
                 (0, _textRenderer.textRenderer)(hotInstance, TD, row, col, prop, value, cellProperties);
                 const { filteringCaseSensitive, allowHtml } = this.cellProperties;
@@ -175,7 +183,21 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
                 const query = this.query;
                 const cellValue = (0, _mixed.stringify)(value);
                 if (allowHtml) {
-                    TD.innerHTML = cellValue;
+                    // `allowHtml` is an explicit opt-in to raw HTML, disabled by default and warned about in
+                    // its own documentation. PR #7368 turned sanitizing off for it and for the `html` cell
+                    // type deliberately, and `autocompleteRenderer` still writes the cell that way, so the
+                    // dropdown keeps matching it: `false` means raw, and silent about it.
+                    //
+                    // Going through `fastInnerHTML` rather than assigning `innerHTML` directly is what makes
+                    // that a stated policy instead of an unguarded sink, and leaves one place to revisit if
+                    // a configured `sanitizer` is ever made to cover this content.
+                    //
+                    // The scope argument is inert while the sanitizer is `false` - nothing reads an option
+                    // and nothing warns. It is `this.hot.rootElement`, not the `hotInstance` argument,
+                    // because this renderer runs inside `htEditor`, a separate Handsontable instance with
+                    // its own settings. That matters the moment the `false` above is revisited: reading the
+                    // option off the argument would silently consult the wrong grid.
+                    (0, _element.fastInnerHTML)(TD, cellValue, false, 'html', this.hot.rootElement);
                 } else if (cellValue && query && query.length > 0) {
                     const indexOfMatch = filteringCaseSensitive === true ? cellValue.indexOf(query) : (0, _string.localeLowerCase)(cellValue, locale).indexOf((0, _string.localeLowerCase)(query, locale));
                     if (indexOfMatch !== -1) {
@@ -302,7 +324,13 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
         let highlightIndex = null;
         let choices = choicesList;
         if (!sortByRelevanceSetting) {
-            choices = choices.toSorted((a, b)=>(0, _mixed.stringify)(a).localeCompare((0, _mixed.stringify)(b)));
+            // Sort a copy, never the passed-in array: `updateChoicesList` is public API and the caller's
+            // array (typically the `source` setting) must keep its original order. `Array#toSorted` would
+            // do this in one call but is outside the `browser-targets.js` baseline (Firefox 115+,
+            // Safari 16+), and swc lowers syntax only — it adds no instance-method polyfills.
+            choices = [
+                ...choices
+            ].sort((a, b)=>(0, _mixed.stringify)(a).localeCompare((0, _mixed.stringify)(b)));
         }
         const filteredChoiceIndexes = [];
         const locale = this.cellProperties.locale;
@@ -365,18 +393,37 @@ class AutocompleteEditor extends _handsontableEditor.HandsontableEditor {
    */ limitDropdownIfNeeded(spaceAvailable) {
         const dropdownHeight = this.getDropdownHeight();
         if (dropdownHeight > spaceAvailable) {
-            let tempHeight = 0;
-            let lastRowHeight = 0;
-            let height = 0;
-            do {
-                lastRowHeight = this.htEditor.stylesHandler.getDefaultRowHeight() ?? 0;
-                tempHeight += lastRowHeight;
-            }while (tempHeight < spaceAvailable)
-            height = tempHeight - lastRowHeight;
+            const rowHeight = this.htEditor.stylesHandler.getDefaultRowHeight() ?? 0;
+            if (rowHeight === 0) {
+                return;
+            }
+            // Show whole rows only, and stop one row short of the boundary: `Math.ceil(...) - 1` is the
+            // exact arithmetic of the do/while this replaced ("add rows until one crosses the free
+            // space, then step back a row"), so an exactly-fitting space still leaves its last row out.
+            // That margin is deliberately preserved - the list is trimmed because it overflows the
+            // workspace, and the rendered rows carry a border the raw row height does not.
+            //
+            // `Math.max(..., 1)` is the fix: without it the height collapsed to 0 whenever the free
+            // space was not taller than a single row, rendering the list as an invisible sliver that hid
+            // every choice - the flexbox-squeezed grids reported in #8872. The MultiSelect editor's
+            // dropdown clamps to one entry the same way (`dropdownController.updateDimensions()`).
+            //
+            // A caveat this cannot solve here: the grid's root element gets `overflow: clip` whenever a
+            // `height` is set, so when the free space is narrower than the forced row, that row is
+            // partly clipped by the grid's bottom edge - fully so when the space reaches 0. Making it
+            // readable in those extremes needs the dropdown to escape the clipping root (DEV-1656).
+            //
+            // No border compensation here, unlike `getTargetDropdownHeight()`'s `getTableHeight() + 1`.
+            // Adding it was measured and changes nothing a user sees: the clipping root, not the list's
+            // own budget, is what bounds the visible row, so the extra pixel only pushes the holder
+            // further past the clip (main 31->32px holder, 28px of option visible either way; classic
+            // 28->29 and 25; horizon 37->38 and 37).
+            const rowsThatFit = Math.max(Math.ceil(spaceAvailable / rowHeight) - 1, 1);
+            const height = rowsThatFit * rowHeight;
             if (this.isFlippedVertically) {
                 this.htEditor.rootElement.style.top = `${parseInt(this.htEditor.rootElement.style.top, 10) + dropdownHeight - height}px`;
             }
-            this.setDropdownHeight(tempHeight - lastRowHeight);
+            this.setDropdownHeight(height);
         }
     }
     /**

package/editors/autocompleteEditor/autocompleteEditor.mjs

@@ -51,7 +51,7 @@ function _class_private_method_init(obj, privateSet) {
 import { HandsontableEditor } from '../handsontableEditor/index.mjs';
 import { pivot } from '../../helpers/array.mjs';
 import { isKeyValueObject, isObject } from '../../helpers/object.mjs';
-import { addClass, getCaretPosition, getFractionalScalingCompensation, getScrollbarWidth, getSelectionEndPosition, outerWidth, setAttribute, setCaretPosition } from '../../helpers/dom/element.mjs';
+import { addClass, fastInnerHTML, getCaretPosition, getFractionalScalingCompensation, getScrollbarWidth, getSelectionEndPosition, outerWidth, setAttribute, setCaretPosition } from '../../helpers/dom/element.mjs';
 import { isDefined, stringify } from '../../helpers/mixed.mjs';
 import { stripTags, localeLowerCase } from '../../helpers/string.mjs';
 import { KEY_CODES, isPrintableChar } from '../../helpers/unicode.mjs';
@@ -153,6 +153,14 @@ var /**
                 outerWidth(this.TEXTAREA) - 2
             ] : undefined,
             autoColumnSize: true,
+            // With `trimDropdown: false` the list column is sized from its content by
+            // AutoColumnSize, so short options produced a list narrower than the edited
+            // cell (#13180). Floor the column at the cell width: the option rows stay
+            // full-width click targets, and `getTargetEditorWidth()` (which reads
+            // `getColWidth(0)`) widens the outer container to match automatically.
+            modifyColWidth: trimDropdown ? undefined : (width)=>{
+                return Math.max(width ?? 0, outerWidth(this.TEXTAREA) - 2);
+            },
             renderer: (hotInstance, TD, row, col, prop, value, cellProperties)=>{
                 textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);
                 const { filteringCaseSensitive, allowHtml } = this.cellProperties;
@@ -160,7 +168,21 @@ var /**
                 const query = this.query;
                 const cellValue = stringify(value);
                 if (allowHtml) {
-                    TD.innerHTML = cellValue;
+                    // `allowHtml` is an explicit opt-in to raw HTML, disabled by default and warned about in
+                    // its own documentation. PR #7368 turned sanitizing off for it and for the `html` cell
+                    // type deliberately, and `autocompleteRenderer` still writes the cell that way, so the
+                    // dropdown keeps matching it: `false` means raw, and silent about it.
+                    //
+                    // Going through `fastInnerHTML` rather than assigning `innerHTML` directly is what makes
+                    // that a stated policy instead of an unguarded sink, and leaves one place to revisit if
+                    // a configured `sanitizer` is ever made to cover this content.
+                    //
+                    // The scope argument is inert while the sanitizer is `false` - nothing reads an option
+                    // and nothing warns. It is `this.hot.rootElement`, not the `hotInstance` argument,
+                    // because this renderer runs inside `htEditor`, a separate Handsontable instance with
+                    // its own settings. That matters the moment the `false` above is revisited: reading the
+                    // option off the argument would silently consult the wrong grid.
+                    fastInnerHTML(TD, cellValue, false, 'html', this.hot.rootElement);
                 } else if (cellValue && query && query.length > 0) {
                     const indexOfMatch = filteringCaseSensitive === true ? cellValue.indexOf(query) : localeLowerCase(cellValue, locale).indexOf(localeLowerCase(query, locale));
                     if (indexOfMatch !== -1) {
@@ -287,7 +309,13 @@ var /**
         let highlightIndex = null;
         let choices = choicesList;
         if (!sortByRelevanceSetting) {
-            choices = choices.toSorted((a, b)=>stringify(a).localeCompare(stringify(b)));
+            // Sort a copy, never the passed-in array: `updateChoicesList` is public API and the caller's
+            // array (typically the `source` setting) must keep its original order. `Array#toSorted` would
+            // do this in one call but is outside the `browser-targets.js` baseline (Firefox 115+,
+            // Safari 16+), and swc lowers syntax only — it adds no instance-method polyfills.
+            choices = [
+                ...choices
+            ].sort((a, b)=>stringify(a).localeCompare(stringify(b)));
         }
         const filteredChoiceIndexes = [];
         const locale = this.cellProperties.locale;
@@ -350,18 +378,37 @@ var /**
    */ limitDropdownIfNeeded(spaceAvailable) {
         const dropdownHeight = this.getDropdownHeight();
         if (dropdownHeight > spaceAvailable) {
-            let tempHeight = 0;
-            let lastRowHeight = 0;
-            let height = 0;
-            do {
-                lastRowHeight = this.htEditor.stylesHandler.getDefaultRowHeight() ?? 0;
-                tempHeight += lastRowHeight;
-            }while (tempHeight < spaceAvailable)
-            height = tempHeight - lastRowHeight;
+            const rowHeight = this.htEditor.stylesHandler.getDefaultRowHeight() ?? 0;
+            if (rowHeight === 0) {
+                return;
+            }
+            // Show whole rows only, and stop one row short of the boundary: `Math.ceil(...) - 1` is the
+            // exact arithmetic of the do/while this replaced ("add rows until one crosses the free
+            // space, then step back a row"), so an exactly-fitting space still leaves its last row out.
+            // That margin is deliberately preserved - the list is trimmed because it overflows the
+            // workspace, and the rendered rows carry a border the raw row height does not.
+            //
+            // `Math.max(..., 1)` is the fix: without it the height collapsed to 0 whenever the free
+            // space was not taller than a single row, rendering the list as an invisible sliver that hid
+            // every choice - the flexbox-squeezed grids reported in #8872. The MultiSelect editor's
+            // dropdown clamps to one entry the same way (`dropdownController.updateDimensions()`).
+            //
+            // A caveat this cannot solve here: the grid's root element gets `overflow: clip` whenever a
+            // `height` is set, so when the free space is narrower than the forced row, that row is
+            // partly clipped by the grid's bottom edge - fully so when the space reaches 0. Making it
+            // readable in those extremes needs the dropdown to escape the clipping root (DEV-1656).
+            //
+            // No border compensation here, unlike `getTargetDropdownHeight()`'s `getTableHeight() + 1`.
+            // Adding it was measured and changes nothing a user sees: the clipping root, not the list's
+            // own budget, is what bounds the visible row, so the extra pixel only pushes the holder
+            // further past the clip (main 31->32px holder, 28px of option visible either way; classic
+            // 28->29 and 25; horizon 37->38 and 37).
+            const rowsThatFit = Math.max(Math.ceil(spaceAvailable / rowHeight) - 1, 1);
+            const height = rowsThatFit * rowHeight;
             if (this.isFlippedVertically) {
                 this.htEditor.rootElement.style.top = `${parseInt(this.htEditor.rootElement.style.top, 10) + dropdownHeight - height}px`;
             }
-            this.setDropdownHeight(tempHeight - lastRowHeight);
+            this.setDropdownHeight(height);
         }
     }
     /**