Tabulator: clearHeaderFilter() makes empty header inputs to trigger ajax request to server

[fingers10]

Describe the bug
With Ajax source configured Tabulator table, if you call .clearHeaderFilter(), this clears all the header inputs as expected. But now after clearing if you Tab through all the empty header inputs, an ajax call is made for each tab press on empty header inputs.

Tabulator Info

• Version - 4.4.3
• Table Construct:

var userGrid = new window.Tabulator("#tableUserResults",
                {
                    placeholder: "No Data Available",
                    layout: "fitColumns",
                    height: height + 27,
                    selectable: false,
                    ajaxURL: window.userUrls.getAll,
                    ajaxConfig: {
                        global: false,
                        async: true
                    },
                    ajaxSorting: true,
                    ajaxFiltering: true,
                    ajaxURLGenerator: function (url, config, params) {
                        const sorters = params.sorters || [];
                        delete params.sorters;
                        sortUrl = sorters.map(sort => `orderby=${sort.field.toLowerCase()} ${sort.dir}`).join('&');

                        const filters = params.filters || [];
                        delete params.filters;

                        const operators = {
                            '=': 'eq',
                            '>': 'gt',
                            '>=': 'gte',
                            '<': 'lt',
                            '<=': 'lte',
                            '!=': 'neq',
                            like: 'co'
                        };

                        (filters || []).forEach((filter) => {
                            filter.type = operators[filter.type] || filter.type;
                        });
                        searchUrl = filters.map(filter => `search=${filter.field.toLowerCase()} ${filter.type} ${filter.value}`).join('&');

                        return `${url}?${sortUrl}&${searchUrl}`;
                    },
                    ajaxResponse: function (url, params, response) {
                        return response.Items;
                    },
                    renderComplete: function () {
                        const count = userGrid.getDataCount();

                        $('#btnSearchResultsExportToExcel').prop('disabled', !(count > 0));
                        $('#spanResultsCount').text(count);
                        $('section.card').height(height + 27);
                    },
                    tooltipsHeader: true,
                    tooltips: true,
                    virtualDomBuffer: height + 27,
                    initialSort: [
                        {
                            column: 'FirstName',
                            dir: 'asc'
                        }
                    ],
                    columns: [
                        {
                            formatter: "rowSelection",
                            titleFormatter: "rowSelection",
                            align: "center",
                            headerSort: false,
                            width: 50,
                            headerSort: false,
                            headerFilter: false,
                            cssClass: 'text-center',
                            frozen: true,
                            headerTooltip: false,
                            tooltip: false,
                            resizable: false,
                            cellClick: function (e, cell) {
                                cell.getRow().toggleSelect();
                            }
                        },
                        {
                            title: 'First Name',
                            field: 'FirstName',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search First Name',
                            formatter: function (cell, formatterParams, onRendered) {
                                return '<a href="#" class="text-underline" aria-haspopup="true">' + cell.getValue() + '</a>';
                            },
                            cellClick: function (e, cell) {
                                $.when(ajaxGetAsync(window.userUrls.getById, { id: cell.getData().Id }, true, window.htmlDataType)).done((response) => {
                                    document.querySelector('#userEntryPartial').innerHTML = response;
                                    $('#userEditModal').modal('show');

                                    userEditForm = $('#formUserEdit').serialize();
                                });
                            }
                        },
                        {
                            title: 'Last Name',
                            field: 'LastName',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search Last Name'
                        },
                        {
                            title: 'Designation',
                            field: 'Designation',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search Designation'
                        },
                        {
                            title: 'Identity Number',
                            field: 'IdentityNumber',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search Identity Number'
                        },
                        {
                            title: 'Brand Name',
                            field: 'Profile.BrandName',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search Brand Name'
                        },
                        {
                            title: 'Client Name',
                            field: 'Profile.Client.Name',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search Client Name'
                        },
                        {
                            title: 'Contact Email',
                            field: 'Profile.ProfileContact.Email',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search Contact Email'
                        },
                        {
                            title: 'Business Name',
                            field: 'Profile.Client.Business.Name',
                            headerFilter: 'input',
                            headerFilterLiveFilter: false,
                            headerFilterPlaceholder: 'Search Business Name'
                        },
                        {
                            title: 'User ID',
                            field: 'Id',
                            visible: false,
                            headerFilter: false,
                            headerSort: false,
                            tooltip: false,
                            resizable: false
                        }
                    ]
                });

To Reproduce
Steps to reproduce the behavior:

1. Construct Tabulator table as shown in above code snippet.
2. call clearHeaderFilter()
3. Now Tab through all the header inputs
4. See ajax call getting made for each tab press with empty header values

Expected behavior
After calling clearHeaderFilter() if we Tab through empty header inputs ajax call should not be triggered.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: latest

[olifolkerd]

@fingers10

Thanks for creating this support ticket, is there anyway you could use the code example you have provided to create a JS Fiddle, it saves so much time getting to the bottom of issues if people can provide a working example

Cheers

Oli :)

[fingers10]

@olifolkerd Here you go JsFiddleLink

Steps to Reproduce:

1. Open the above link.
2. Type something in title column search input and press enter.
3. Click on reset search button.
4. Now click on title column search input and press tab.
5. See ajax call getting made for each tab press with empty header values.

[olifolkerd]

Thanks for the fiddle, i will look into that further

Cheers

Oli :)

[olifolkerd]

@fingers10 I thought i would let you know that i have just published a detailed guide on how to report bugs in tabulator to help people provide the needed information.

Full details can be found on the updated Community Guidelines Page

Cheers

Oli :)

[olifolkerd]

Hey @fingers10

I have pushed a fix for this to the 4.6 branch, which should be released later this weekend.

Cheers

Oli :)

[fingers10]

@olifolkerd Thanks. This is fixed. Tested and Confirmed.