Виртуальная клавиатура не отображается под ячейкой, когда на странице имеется несколько экземпляров таблицы handsontable.

Question

Я использую https://github.com/Mottie/Keyboard для ввода данных в Handsontable. Я вызываю клавиатуру в afterSelectionEnd для элемента текстового редактора, который имеет класс handsontableInput, и он появляется чуть ниже ячейки. Когда у меня есть одна таблица на странице, она отлично работает. Но когда на странице несколько таблиц, результат будет другим. Вот шаги, чтобы воспроизвести проблему

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();
}, 
    });
})   

Пожалуйста, обратитесь jsfiddle http://jsfiddle.net/yd0fucct/5/ для воспроизведения проблемы. Я также разместил проблему на странице Handsontable Github

• Нажмите на ячейку первой таблицы, клавиатура появится под ячейкой, что хорошо
• Нажмите на ячейку второго стола. Результат: клавиатура появляется в левой верхней части страницы
• Снова щелкните в той же ячейке второй таблицы. Результат: клавиатура появляется чуть ниже ячейки, что хорошо

Ожидаемое поведение: когда пользователь впервые щелкает ячейку второй таблицы (шаг 2), она должна появиться сразу под ней. Пожалуйста, руководство для решения этой проблемы.

Когда мы сначала нажимаем на вторую таблицу, проблема не возникает. Это происходит только тогда, когда мы сначала нажимаем на приведенную выше таблицу.

Answer 1

Обратитесь к этой проблеме GitHub для решения

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();
}
}