select2, x-editable and bootstrap-table compatibility

Question

I use bootstrap 3 and bootstrap-table. I would like to use 'tag' mode like in this example.

When I use select2 version 3.4.4 (like in x-editable example) my code works, but when I want to use the latest version 4.0.0 my code doesn't work.

I get error message:

Uncaught Error: No select2/compat/inputData

I tried to replace select2.js by select2.full.js, but in this case editable box is empty.

How can I make editable cells compatible with the latest version of select2?

html

    <table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
    <thead>
    <tr>
        <th data-field="name" data-editable="true">Name</th>
        <th data-field="stargazers_count" data-editable="true">Stars</th>
        <th data-field="forks_count" data-editable="true">Forks</th>
        <th data-field="description" data-editable="true">Description</th>
    </tr>
    </thead>
    <tbody>
        <tr><td>ala</td><td>ele</td><td class="tag" data-toggle="manual" data-type="select2" data-value="na, an, sd">na,an,sd</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
    </tbody>
</table>

javascript

$.fn.editable.defaults.mode = 'inline';

$('table').bootstrapTable({
    editable: true
});

console.log($('.tag'));

var tagCells = $('.tag');
$(tagCells).each(function() {
    var tags = $( this ).children(":first").html().replace(/ /g,'').split(",");
    console.log(tags);
    $(this).editable({
        select2: {
            tags: tags,
            tokenSeparators: [",", " "]
        }
    });
});

$('.tag').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).editable('toggle');
});

Answer 1

Apparently, select2 since version 4 can't be applied anymore to <input/> controls.
Issue #3057 on select2's GitHub page mentions it:

Now i added the new plugin in my code. But it is throwing this error:
Uncaught Error: No select2/compat/inputData
What causes it?

It was due to using it on input element. Fixed. Thanks for informing.

Some debug of your fiddle show that indeed X-editable turns your table cell first into

<input type="hidden" value="na, an, sd">

and then applies select2 on it, which fails.
Also select2 own documentation implicitly suggest this; the correct way to initialize a tagged control is starting from a <select/>:

<select data-tags="true" data-placeholder="Select an option"></select>

And you can also check on this fiddle that indeed using it on an input doesn't work and triggers the same error, you need a select instead.

To have X-editable and select2 4 to work together, you should find a way of injecting some code in between the creation of the hidden input element and the call of select2, to be able to turn it into a select, which is roughly the same as rewriting the X-editable--select2 bridge.
Unfortunately I am not proficient with X-editable code and I didn't manage to workaround the problem, but if it's necessary for you to use version 4 you may start from line 4900 of select2.js, where I put a breakpoint to check which real HTMLElement was being passed to select2: