Virtual keyboard does not appear below cell when there are multiple instances of handsontable table on page - handsontable

Question

I am using https://github.com/Mottie/Keyboard to enter inputs in the Handsontable. I call keyboard on 'afterSelectionEnd' on text editor element which has class 'handsontableInput' and it appears just below cell.
When I have single table on page, it works perfectly.
But when there are multiple tables on page, result is different. Here are Steps to reproduce the problem
function keyboard()
{
$('.handsontableInput').keyboard
({
layout: 'custom',
customLayout: {
'default' : [
'a s d f g h j k',
'a s d f g h j k',
'a s d f g h j k'
],
},
})
.getkeyboard().reveal();
}
$(document).ready(function () {
function getData() {
return [
["", "Kia", "Nissan", "Toyota", "Honda"], ["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13]];
}
var container1 = document.getElementById('example1');
var container2 = document.getElementById('example2');
var hot1 = Handsontable(container1, {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}],
afterSelectionEnd : function (instance,col,row,td){
this.getActiveEditor().beginEditing();
keyboard();
},
});
var hot2 = Handsontable(container2, {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}],
afterSelectionEnd : function (instance,col,row,td){
this.getActiveEditor().beginEditing();
keyboard();
},
});
})
Please refer jsfiddle http://jsfiddle.net/yd0fucct/5/ to reproduce problem.
I have also posted Issue on Handsontable Github page
Click on the cell of first table, keyboard appears below cell which is good
Click on the cell of second table. Result : keyboard appears in left top of page
Again click in the same cell of second table. Result : Keyboard appears just below cell which is good
Expected behavior : When user clicks on cell of second table first time ( step 2 ), it should appear immediately below it.
Please guide to solve this problem.
When we click the second table first the issue does not occur. It happens only when we click the above table first.

Answer 1

Refer this GitHub issue for solution
var lastInput;
function keyboard() {
var kb,
$input = $(':focus');
if ($input.length) {
lastInput = $input;
// close the last keyboard
kb = lastInput.getkeyboard();
if (kb) {
kb.close(true);
}
if (!$input.hasClass('.ui-keyboard-input')) {
$input.keyboard({
usePreview: false,
initialFocus: false,
layout: 'num'
});
}
$input.getkeyboard().reveal();
}
}