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

0
votes

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.

1
handsontable

1 Answers

0
votes

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