Search code examples
javascriptandroidhtmlandroid-softkeyboardtabulator

Android keyboards disappear in dropdown editor field in Tabulator

I think the keyboard causes a resize on the table, which triggers a table.redraw(), which causes the field to lose focus, making the keyboard disappear, but IDK

This happens in a Samsung Tablet with Android 13

Gif showing the problem

Gif taken from the Tabulator docs

var data=[
{location:"United Kingdom"},
{location:"Germany"}
]
//Build Tabulator

var table = new Tabulator("#example-table", {
  height: "311px",
  data:data,
  columns: [
  
    {
      title: "Location",
      field: "location",
      width: 130,
      editor: "list",
      editorParams: {
        autocomplete: "true",
        allowEmpty: true,
        listOnEmpty: true,
        valuesLookup: true
      }
    },
   
  ],
});
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

How to fix this problem?

Edit: Small discovery, The problem does not happen in jsfiddle

Neither in the code snippet above

What those two have in common is that they run inside an IFRAME, the IFrame does not get resized (or something like that)

Another clue: The problem happens in Chromium based browsers as Chrome and Edge, tried in Firefox and it works

Solution

  • Ok, I debugged this. The issue is coming from this line in Popup.js module.

    window.addEventListener("resize", this.blurEvent);

    The on-screen keyboard in Android is triggering the window resize event and this in turn triggers the tabulator blur event which is stopping the editing on the field and closing the select dropdown.

    I've reproduced the issue in this CodeSandbox demo.

    Solution:

    Handle the Window resize event and stop it's propagation if the editor is open.

    window.addEventListener("resize", function (event) {
  if (document.getElementsByClassName("tabulator-editing").length) {
    event.stopImmediatePropagation();
  }
});

    Checkout this Codesandbox demo in Android tablet. You can see that the on-screen keyboard stays and let's you edit the field.

    Check this working GIF from Android emulator:

    Android on-screen keyboard working