Why is the Tabulator rowTapHold method not working with iOS devices?

Question

I can't seem to figure out why the Tabulator rowTapHold() method will not work with mobile devices. The following is my very simple code snippet:

HTML

<link href="~/css/Dailies/tabulator.css" rel="stylesheet" />
<div id="example-table"></div>
<script src="~/js/Dailies/tabulator.js"></script>

JavaScript

var tabledata = [
    { Laborcode: "select a code", Memo: "test row #1" },
    { Laborcode: "select a code", Memo: "test row #2" },
    { Laborcode: "select a code", Memo: "test row #3" },
    { Laborcode: "select a code", Memo: "test row #4" },
    { Laborcode: "select a code", Memo: "test row #5" }
];

var laborCodes = ["1001", "1002", "1003"];
var table = new Tabulator("#example-table", {
    columns: [
        { title: "Labor Code", field: "Laborcode", responsive: 0, hozAlign: "center", editor: "select", editorParams: function (cell) { values: []; return { values: laborCodes }; } },
        { title: "Memo", field: "Memo", responsive: 0, hozAlign: "left", editor: "input" },
    ],
    data: tabledata,
    height: "100%",
    layout: "fitDataFill",
    reactiveData: true, //enable reactive data
    responsiveLayout: "collapse",
    rowContextMenu: [
        {
            label: "Add Row",
            action: function (e, row) { row.getTable().addRow({ Laborcode: "select a code", Memo: "add a memo" }, false); }
        },
        {
            label: "Delete Row",
            action: function (e, row) { row.delete(); }
        }
    ],
    rowTapHold: [
        {
            label: "Add Row",
            action: function (e, row) { row.getTable().addRow({ Laborcode: "select a code", Memo: "add a memo" }, false); }
        },
        {
            label: "Delete Row",
            action: function (e, row) { row.delete(); }
        }
    ]
});

The Tabulator rowContextMenu method works just fine in the desktop browsers I've tested. I need the comparable rowTapHold method to work for mobile devices.

As always, any assistance is greatly appreciated.

EDIT

By removing the Tabulator moveableRows method, I was able to get the rowTapHold method to work with Android devices. I am still unable to get the rowTapHold feature to work with iOS devices.

I have added a second (very simple) Tabulator example at jsFiddle: https://jsfiddle.net/0fqhupox/.

Answer 1

The issue is because the rowTapHold option is intended to be used as a callback, so you must pass a function to the option.

You appear to be passing an array of menu options to the rowTapHold property. This does not support menu triggering, it only supports a callback function that should be run when the trigger happens.

If pass a function into this property, you will see it is called when a user tapHolds a row

The Row Callbacks Documentation explains the correct use of the row events callbacks.

Update

As of version 4.8 of Tabulator (released today) context menus now automatically add a binding for tapHold on mobile devices to improve mobile functionality