how to disable sorting click event on table header - Select2

Basically the same issue as here, but with Select2 dropdowns

https://datatables.net/forums/discussion/27035/how-to-disable-sorting-click-event-on-table-header-children

The solution to add e.stopPropatation() works fine on a standard select, but doesn't work once changing it to Select2

What should I do to prevent sorting when the dropdown is clicked?

initComplete: function () {
this.api().columns(".canFilter").every(function () {

                        var column = this;
                        var select = $('<select class="select2" ><option value=""></option></select>')
                            .appendTo($(column.header()))
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            }).on('click', function (e) { e.preventDefault();  e.stopPropagation(); }); <---neither works if select2
                        column.data().unique().sort().each(function (d, j) {
                            if (d!='')
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });

                        $('.select2').select2(
                            {
                               dropdownAutoWidth: true,
                                 minimumResultsForSearch: Infinity,
                            });
                    });
                },