Virtual keyboard does not appear below cell when there are multiple Handsontable tables on page

[shivrajsa]

Description

I am using Keyboard library to enter inputs in the table cells created using https://github.com/handsontable/handsontable . I call keyboard on 'afterSelectionEnd' on text editor element which has class 'handsontableInput' and it appears just below cell.
Here is code
Code of Keyboard

function keyboard()
{
$('.handsontableInput').keyboard
({
layout: 'custom',
customLayout: {
'default' : [
//keys
],
},
})
.addTyping()
.getkeyboard().reveal();
}

afterSelectionEnd : function (instance,col,row,td){
this.getActiveEditor().beginEditing();
keyboard();
},

Please refer jsfiddle
When I have single table on page, it works perfectly.
But when there are multiple tables on page, result is different

Steps to reproduce

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 and value in preview is previously selected cell's value
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.

I have posted same issue on Handsontable and on Stackoverflow

[Mottie]

Hi @shivrajsa!

The problem appears to be that the $('.handsontableInput') element is updated and not completely replaced. So if you reveal the keyboard instead of re-initializing it, everything works smoothly

Demo

function keyboard() {
  var $input = $('.handsontableInput');
  // initialize keyboard if not already initialized
  if (!$input.getkeyboard()) {
    $input.keyboard({
      usePreview: false,
      layout: 'num'
    });
  }
  // open the keyboard
  $input.getkeyboard().reveal();
}

I ended up making the following changes to the demo:

• Removed the hack to include resources in the css panel. Added the files to the "External Resources" in the left-most panel.
• jQuery UI was not included due to some strange formatting, so the keyboard was moved to the bottom of the page using css.
• Modified the keyboard function as shown above.

[shivrajsa]

Thank you @Mottie .
Positioning problem is fixed by moving keyboard to bottom.
But there is one more issue, keyboard entries are not possible when user selects cell from second table.

Here is detail scenario

Click on the cell of first table
Click on the cell of second table and enter values with the help of keyboard
Result : Keyboard input is not accepted by second table

[Mottie]

Ahh, you are correct. Sorry about that!...

I discovered that there was a new handsontableInput element added after every interaction. And using $('.handsontableInput') was not targeting the current input. I've updated the same demo (https://jsfiddle.net/Mottie/stqxoox2/) with the following code:

function keyboard() {
  var $input = $(':focus');
  if ($input.length) {
    if (!$input.hasClass('.ui-keyboard-input')) {
      $input.keyboard({
        usePreview: false,
        initialFocus: false,
        layout: 'num'
      });
    }
    $input.getkeyboard().reveal();
  }
}

[shivrajsa]

Thank you @Mottie . It's working perfectly. Thanks a ton for this wonderful library.

[shivrajsa]

Hi @Mottie
There is one more issue I found.
If we navigate table cells using arrow keys, cell value is updated with previously selected cell value.
Could you please help to solve this problem.

[Mottie]

Weird!

It looks like we need to make sure the last keyboard is closed before revealing the next. If you update the code as follows, it will behave (demo)

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

[shivrajsa]

Thanks again @Mottie , it is working.
What I discovered is , when we set usePreview: false, it is working OK.
Normally preview is helpful so is there a way to fix this issue ?

[Mottie]

Sorry for not responding earlier... I got back from vacation last week and didn't get a chance to follow up. Has this issue been resolved?

[shivrajsa]

@Mottie This is issue is still there, it works only when we set usePreview: false.
Normally preview is helpful

[kapurKK]

@Mottie, thanks for your guidance. I have a requirement to use number and character keyboard for different cell in a single application. I am using jquery keyboard js for achieving this. Using your code I am capable of passing the layout (numc, qwertyc) but unable to change the layout. Entire application is based on html and js.

afterSelectionEnd: function(instance, col, row, td) {
    //alert(col)
    var n='numc'; //qwerty
    //if(col==0 || col==4){
    if(col==1){
        n='qwertyc';
    }
    this.getActiveEditor().beginEditing();
    keyboardNum(n);       
}, 

function keyboardNum(layouts) { 
      var kb,
      $input = $(':focus');
      if ($input.length) {
      lastInput = $input;
      // close the last keyboard
      kb = lastInput.getkeyboard();

      if (kb) {
      kb.close(true);
      }
        //alert(kb);
      if (!$input.hasClass('.ui-keyboard-input')) {
      $input.keyboard({
      usePreview: false,
      initialFocus: false,
      layout: layouts
      });
      }
      $input.getkeyboard().reveal();
      }
      }

[Mottie]

Hi @kapurKK!

Instead of closing and reopening the keyboard, use the redraw method.