Migrating from 13.1 to 14.0

Migrate from Handsontable 13.1 to Handsontable 14.0, released on November 30th, 2023.

More information about this release can be found in the 14.0.0 release blog post.
For a detailed list of changes in this release, see the Changelog.

Changes to IME

Handsontable 14.0 changes how it manages browser focus. The focus now goes to the cell/header elements, not an underlying TEXTAREA element as in versions <=13.1.0. This change allows screen readers to recognize the table contents correctly. However, this makes the IME editor not compatible with our “fast edit” functionality (the ability to start editing a cell without opening the editor first).

To maintain the IME functionalities, Handsontable 14.0 introduces the imeFastEdit option that swaps the browser focus to the editor’s editable element after a small, configurable delay.

To utilize it in your implementation, set the imeFastEdit option to true in your settings object.

Adjust your application to the modified keyboard shortcuts

The new Handsontable version comes with an updated set of keyboard shortcuts. Most of them are new additions, but some existing shortcuts also change. Make sure to adjust your application to the current specification.

Ctrl/Cmd + A

Before	After
Selects all cells and headers	Selects all cells without headers
Selection highlight moves to the top-left cell of the selection	Focused cell does not move

TAB in the Filtering menu

Before	After
Iterates through the content list	Iterates through the menu items. When focused on the search input, the arrow keys allow iterating through the content list

More information: Keyboard Shortcuts page in the documentation

Check if your template looks fine with the updated colors

To make the table more accessible, this release changes the color of the invalid cells and some of the cell icons. Make sure it looks good with your application template.

Before	After
Cell background: #ff4c42	Cell background: #ffbeba
Autocomplete-typed cells arrow: #eeeeee	Autocomplete-typed cells arrow: #bbbbbb
Invalid autocomplete-typed cells arrow: #eeeeee	Invalid autocomplete-typed cells arrow: #555555
Invalid autocomplete-typed cells arrow on hover: #777777	Invalid autocomplete-typed cells arrow on hover: #1a1a1a

Update ContextMenu.open() and DropdownMenu.open() calls

Handsontable 14.0 changes the accepted position argument for ContextMenu.open() and DropdownMenu.open(). When you open the menu programmatically with a literal position, use an object with top and left properties instead of pageX and pageY. Passing a native browser Event instance still works the same as before.

const menu = hot.getPlugin('contextMenu');

// Before (13.x): menu.open({ pageX: 200, pageY: 300 });
// After (14.0+): use { top, left }:
menu.open({ top: 300, left: 200 });

// Native event -- works unchanged:
element.addEventListener('contextmenu', (event) => {
  menu.open(event);
});

Result

Your application now runs on Handsontable 14.0.