On Android keyboard flashes when editing table JS Tablulator

Question

Tabulators mainpage example works on mobile just fine. When trying to edit a column on Android phone the keyboard shows up and then almost immediately goes away leaving the box unselected.

Using Tabulator Version 4.2.1

I have copied source code given with no luck, any help would be grateful.

I'm using the XAMMP stack to locally host the website Using Android version 9 with web browser chrome Version 72.0.3626.105

        var table = new Tabulator("#example-table", {
        layout:"fitColumns",      //fit columns to width of table
        responsiveLayout:"hide",  //hide columns that dont fit on the table
        columns:[                 //define the table columns
            {title:"Name", field:"name", editor:"input"},
            {title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true},
            {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{"Male":"male", "Female":"female"}},
            {title:"Color", field:"col", width:130, editor:"input"},
            {title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"},
        ],
    });

    var tableData = [
        {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
        {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    ]
    table.setData(tabledata);

Not sure why it is not working, don't know if it is a bug or something on my end.

Any advice would be fantastic

Answer 1

You need to set a height on your table in order to use the virtual DOM. At the moment you are trying to use options like responsiveLayout that only work when the virtual DOM is enable, but with out a height it has no idea how big the scroll area should be.