Tabulator and select2 header filter

Question

Stack:

• ruby - 2.7.6
• rails - 6.1.5
• tabulator - 5.4.3
• jquery-rails gem - 4.4.0
• jquery-ui-rails gem - 6.0.1
• select2-rails gem - 3.5.11

To enable our customized and an already established select2 field for data filtering, I've tried to use select2 as a custom headerFilter (as shown in this example/answer https://stackoverflow.com/a/53622648). The select field and its options do appear but nothing happens when an item is selected nor any select2 events are triggered upon selection.

Expectations: swapping a default built-in list editor with select2 library and using it as a headerFilter.

Attempt: fetching required items for select field from a backend, feeding these items into select2 builder and then inserting the whole select2 field into headerFilter

Result: Select2 search field does appear and works as intended (field is visible, options are visible) until any item is selected. Upon selection, nothing happens and no select2 event is triggered, so headerFiltering can not be applied using select2. Also, by clicking on a chosen select2 item, I do get a warning in a console:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Column description:

{
  title: 'Items',
  field: 'item_name',
  headerFilter: selectEditor,
  headerSort: false
},

var selectEditor = function(cell, onRendered, success, cancel, editorParams){

  //create input element to hold select2
  var container = document.createElement("span");
  var editor = document.createElement("input");
  container.append(editor);

  onRendered(function(){
    $(editor).select2({
      data: [{text: 'hi', value: '1'}],
      multiple: false,
      width: '100%',
      allowClear: true
    });

    $(editor).on('change', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('change.select2', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('select2:select', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('blur', function (e) {
      console.log('blurred');
      cancel();
    });

    $(editor).on('click', function (e) {
      console.log('clicked');
      cancel();
    });
    container.focus();
  });
  return container;
}

UPDATE:

Answering to one of my own questions. Redraw event firing on list autocomplete can be stopped with headerFilterLiveFilter:false config set in a cell (also clearable styles should be configured). Column config:

{
  title: 'Items',
  field: 'item_name',
  headerFilter: 'list',
  headerFilterPlaceholder: 'Item name',
  headerSort: true,
  headerFilterLiveFilter:false,
  headerFilterParams: {
    clearable: true,
    values: {
      '': 'All',
      'Item1': 'Item One',
      'Item2': 'Item Two'
    },
  },
}

Answer 1

This will be because selecting an element in the list is causing the blur event to be triggered cancelling the edit.

As a test, try commenting out the blur event in your code and see if selecting now works.

If ti does that is your issue. You then need to manage the blur in a more complex manor. You are right that you need to cancel on a blur, but you should check the origin of the blur event to see if it came from the select2 editor list element, and ignore it if that is the case.

Alternativly you could use the built in list editor which will do all that for you https://tabulator.info/docs/5.4/edit#editor-list