Tabbing outside of handsontable cells - handsontable

Question

We have a button at the bottom of handsontable. When the user tabs in the last cell, can we select the button instead of wrapping back to the first cell?
Here is the jsFiddle
var data = [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2014", 10, 11, 12, 13],
["2015", 20, 11, 14, 13],
["2016", 30, 15, 12, 13]
];
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapColumn: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.js"></script>
<form>
<div id='example'></div>
<br />
<input type="button" value="Save"></input>
</form>

Answer 1

What I would do is capture the event, in your case .on('beforekeydown'), and check for the tab key. If pressed, check what cell the hot instance is currently on using hot.getSelected() and if it is the last cell, switch the focus to whatever button you want. Here is some detail of the code:
Handsontable.Dom.addEvent(containerTag, 'keydown', function(e) {
// On Tab, go to external button if last cell
if (e.keyCode === 9 && hotInstance) {
e.stopPropagation();
var selection = hotInstance.getSelected();
var rowIndex = selection[0];
var colIndex = selection[1];
if (rowIndex == lastRow && colIndex == lastCol) {
hotInstance.deselect();
buttonJquerySelector.focus();
}
}
});
I haven't tested this code but this is more or less what you should be trying to do.

Answer 2

Here is a fix that work on multiple tables. Place a button inside the container and add a class name which make the button positioned outside the point of view. Works in 6.2.2
Handsontable.hooks.add('beforeKeyDown', function (event) {
// On Tab, go to external button if last cell
if (event.keyCode !== 9) {
return;
}
var sel = this.getSelected();
var lastRow = this.countRows() - 1;
var lastCol = this.countCols() - 1;
if ((!event.shiftKey && sel[0][0] === lastRow && sel[0][1] === lastCol) || (event.shiftKey && sel[0][0] === 0 && sel[0][1] === 0)) {
event.stopImmediatePropagation();
var el = $(this.getInstance()).get(0).rootElement;
// Focus the activator button first -> otherwise, if the user has not tabbed into the table, it wouldn't skip to the next form element
var hotActivators = el.getElementsByTagName('button');
if (hotActivators.length > 0) {
hotActivators[0].focus();
}
this.unlisten();
this.deselectCell();
}
});
CSS:
.hotActivatorButton {
position: fixed;
bottom: 100%;
right: 100%;
}