'React Tabulator - header filter for specific select column - remove 'X'

On react tabulator columns, can you remove the clear 'x' option on header filters?

Problem: if they click 'X' it clears the filter as expected but if they click on the same filter for another list item, the list doesn't load.

if they just click on the list items without clicking the 'X' it works fine.
Column:

{
    title: 'Column',
    field: 'Column',
    headerFilter: 'select',
    headerFilterParams: {
                values: true,
                sortValuesList: 'asc',
                },
            width: 125,
}

I've included this in CSS code for overall page to remove the 'X' delete option but I'm only interested in changing it for specific header and not all. All columns are input search types.

`input[type='search']::-ms-clear { display: none; width: 0; height: 0; } input[type='search']::-ms-reveal { display: none; width: 0; height: 0; }

input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button, input[type='search']::-webkit-search-results-decoration { display: none;`

I've also played with built-in titleFormatter with Tabulator but can't get it working.

cssreactjstabulator


Solution 1:[1]

This might be a bug in Tabulator. I have used blur to workaround this problem..

Tabulator.extendModule("edit", "editors", {
  select: function (cell, onRendered, success, cancel, options) {
    let inputElement = SelectEditor.call(
        this,
        cell,
        onRendered,
        success,
        cancel,
        options
    );
  
    let listener = function (event) {
    inputElement.blur();
  };

  inputElement.addEventListener("search", listener);
  return inputElement;
}
});

See My CodeSandBox

Additionaly You can also report it on Tabulator Github

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions