JavaScript Data Grid Migrate from 13.1 to 14.0
Migrate from Handsontable 13.1 to Handsontable 14.0, released on November 30th, 2023.
Changes to IME
With the release of Handsontable 14.0, we change the way we manage the browser focus. Now the focus will be assigned to the cell/header elements, not an underlying TEXTAREA element, as it used to be in versions <=13.1.0. The change was introduced to allow 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, we introduce 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 there have been some changes in the already-existing ones. 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 |