Escape Key to Cancel Edit Mode Not Working

Questions
1

I am trying to give the user the option to select a cell and go into edit mode. It works except for when the user selects the “escape” key on the keyboard, it does not cancel the edit mode. The user has to click away from the cell. I want it to be similar to when you double-click the cell and then select “escape” to cancel the edit.

Example:

<button class="ex1">Edit Cell</button>
<div id="example1"></div>

<script>
    var example = document.getElementById('example1');
    var hot = new Handsontable(example, {
        data: [
            ['John', 'Smith', 19],
            ['Brian', 'Adams', 59]
        ],
        rowHeaders: true,
        colHeaders: ['Name', 'Surname', 'Age'],
        outsideClickDeselects: false,
        licenseKey: 'non-commercial-and-evaluation'
    });

    document.querySelector('.ex1').addEventListener('click', function () {
        hot.selectCell(0, 0);
        hot.getActiveEditor().enableFullEditMode();
        hot.getActiveEditor().beginEditing();
    });
</script>
2

Hi @ptownbro , thanks for the detailed report. The snippet made this easy to reproduce.

This looks like a limitation on your side. Handsontable only processes its keyboard shortcuts (Escape, Enter, Tab in the editor) while the grid is in its “listening” state. You can check it with hot.isListening().

Clicking a button outside the grid takes it out of that state, and opening the editor programmatically with getActiveEditor().beginEditing() doesn’t restore it. The editor still accepts typing because the browser handles text input natively, but every grid-managed key (Escape included) is ignored. That’s why clicking away is the only thing that closes it.

The reliable workaround is to defer opening the editor until the click has fully finished, and re-select the cell so focus re-enters the grid through its normal path:

button.addEventListener('click', () => {
  setTimeout(() => {
    const [row, col] = hot.getSelectedLast() ?? [0, 0];
    hot.selectCell(row, col);

    const editor = hot.getActiveEditor();
    editor.enableFullEditMode();
    editor.beginEditing();
  }, 0);
});

With this in place, Escape cancels the edit and Enter commits it, exactly as if the editor had been opened by double-click or F2.

I verified both the issue and the workaround on 18.1.1. Which version are you on?

3

I’m using 18.1. And, that fixed the issue. The escape key is now working as expected. Thanks!

I re-wrote what you suggested in my original format and removed the extra stuff you added to confirm what the needed change was.

document.querySelector('.ex1').addEventListener('click', function () {
    setTimeout(() => {
        hot.selectCell(0, 0);
        hot.getActiveEditor().enableFullEditMode();
        hot.getActiveEditor().beginEditing();
   }, 0);
});

The solluution was to wrap my lines with the following:

setTimeout(() => { .... }, 0);
1 Like