(EDIT: demo here https://jsfiddle.net/2brj4nj7/)
I'm using smooth-scrollbar javascript plugin. I initialize this plugin everytime a select2 dropdown opens, and destroy it when it closes:
$('select').select2()
.on('select2:open', function() {
setTimeout(function(){
select_scrollbar = Scrollbar.init(document.getElementsByClassName('select2-results__options')[0], options);
}, 0);
})
.on('select2:close', function() {
if (typeof select_scrollbar !== 'undefined') {
select_scrollbar.destroy();
}
});
scrollbar.addListener(function(status) {
//var offset = status.offset;
if (typeof select_scrollbar !== 'undefined') {
$('select').select2('close');
}
});
The problem is that when I write something in the search input, if I close the dropdown and open it again, it breaks/crashes with errors in console.
When I open the dropdown, I can see the text "Searching..." and the selection/hover not working (plus the select2('close') I have in the smooth-scrollbar listener doesn't work neither, so it acts like a fixed element when I scroll the page, but that's because the plugin uses css translate3d):
TypeError: item is undefined[Learn More] select2.js:895:13
S2</</Results.prototype.setClasses/</< https://static.domain.com/js/select2.js:895:13
.each https://static.domain.com/js/jquery-2.2.4.js:380:10
jQuery.prototype.each https://static.domain.com/js/jquery-2.2.4.js:152:10
S2</</Results.prototype.setClasses/< https://static.domain.com/js/select2.js:889:7
S2</</SelectAdapter.prototype.current https://static.domain.com/js/select2.js:3048:5
S2</</Results.prototype.setClasses https://static.domain.com/js/select2.js:881:5
S2</</Results.prototype.bind/< https://static.domain.com/js/select2.js:1055:7
S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7
S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7
S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5
S2</</Select2.prototype._registerEvents/< https://static.domain.com/js/select2.js:5327:9
S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7
S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7
S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5
S2</</Select2.prototype.open https://static.domain.com/js/select2.js:5492:5
S2</</Select2.prototype.toggleDropdown https://static.domain.com/js/select2.js:5483:7
S2</</Select2.prototype._registerSelectionEvents/< https://static.domain.com/js/select2.js:5270:7
S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7
S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7
S2</</SingleSelection.prototype.bind/< https://static.domain.com/js/select2.js:1512:7
jQuery.event.dispatch https://static.domain.com/js/jquery-2.2.4.js:4751:16
jQuery.event.add/elemData.handle https://static.domain.com/js/jquery-2.2.4.js:4564:6
When I hover the results, this error appears:
TypeError: params.data is undefined[Learn More] select2.js:1372:7
S2</</BaseSelection.prototype.bind/< https://static.domain.com/js/select2.js:1372:7
S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7
S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7
S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5
S2</</Select2.prototype._registerResultsEvents/< https://static.domain.com/js/select2.js:5298:7
S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7
S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:631:7
S2</</Results.prototype.bind/< https://static.domain.com/js/select2.js:1223:7
jQuery.event.special[orig].handle https://static.domain.com/js/jquery-2.2.4.js:5085:11
jQuery.event.dispatch https://static.domain.com/js/jquery-2.2.4.js:4751:16
jQuery.event.add/elemData.handle https://static.domain.com/js/jquery-2.2.4.js:4564:6
When I click (select) a result, this one:
TypeError: data is undefined[Learn More] select2.js:3054:5
S2</</SelectAdapter.prototype.select https://static.domain.com/js/select2.js:3054:5
S2</</SelectAdapter.prototype.bind/< https://static.domain.com/js/select2.js:3131:7
S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7
S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7
S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5
S2</</Select2.prototype._registerResultsEvents/< https://static.domain.com/js/select2.js:5298:7
S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7
S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:631:7
S2</</Results.prototype.bind/< https://static.domain.com/js/select2.js:1210:7
jQuery.event.dispatch https://static.domain.com/js/jquery-2.2.4.js:4751:16
jQuery.event.add/elemData.handle https://static.domain.com/js/jquery-2.2.4.js:4564:6
(EDIT: demo here https://jsfiddle.net/2brj4nj7/)
I'm using smooth-scrollbar javascript plugin. I initialize this plugin everytime a select2 dropdown opens, and destroy it when it closes:
The problem is that when I write something in the search input, if I close the dropdown and open it again, it breaks/crashes with errors in console.
When I open the dropdown, I can see the text "Searching..." and the selection/hover not working (plus the
select2('close')I have in the smooth-scrollbar listener doesn't work neither, so it acts like a fixed element when I scroll the page, but that's because the plugin uses css translate3d):TypeError: item is undefined[Learn More] select2.js:895:13 S2</</Results.prototype.setClasses/</< https://static.domain.com/js/select2.js:895:13 .each https://static.domain.com/js/jquery-2.2.4.js:380:10 jQuery.prototype.each https://static.domain.com/js/jquery-2.2.4.js:152:10 S2</</Results.prototype.setClasses/< https://static.domain.com/js/select2.js:889:7 S2</</SelectAdapter.prototype.current https://static.domain.com/js/select2.js:3048:5 S2</</Results.prototype.setClasses https://static.domain.com/js/select2.js:881:5 S2</</Results.prototype.bind/< https://static.domain.com/js/select2.js:1055:7 S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7 S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7 S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5 S2</</Select2.prototype._registerEvents/< https://static.domain.com/js/select2.js:5327:9 S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7 S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7 S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5 S2</</Select2.prototype.open https://static.domain.com/js/select2.js:5492:5 S2</</Select2.prototype.toggleDropdown https://static.domain.com/js/select2.js:5483:7 S2</</Select2.prototype._registerSelectionEvents/< https://static.domain.com/js/select2.js:5270:7 S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7 S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7 S2</</SingleSelection.prototype.bind/< https://static.domain.com/js/select2.js:1512:7 jQuery.event.dispatch https://static.domain.com/js/jquery-2.2.4.js:4751:16 jQuery.event.add/elemData.handle https://static.domain.com/js/jquery-2.2.4.js:4564:6When I hover the results, this error appears:
TypeError: params.data is undefined[Learn More] select2.js:1372:7 S2</</BaseSelection.prototype.bind/< https://static.domain.com/js/select2.js:1372:7 S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7 S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7 S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5 S2</</Select2.prototype._registerResultsEvents/< https://static.domain.com/js/select2.js:5298:7 S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7 S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:631:7 S2</</Results.prototype.bind/< https://static.domain.com/js/select2.js:1223:7 jQuery.event.special[orig].handle https://static.domain.com/js/jquery-2.2.4.js:5085:11 jQuery.event.dispatch https://static.domain.com/js/jquery-2.2.4.js:4751:16 jQuery.event.add/elemData.handle https://static.domain.com/js/jquery-2.2.4.js:4564:6When I click (select) a result, this one:
TypeError: data is undefined[Learn More] select2.js:3054:5 S2</</SelectAdapter.prototype.select https://static.domain.com/js/select2.js:3054:5 S2</</SelectAdapter.prototype.bind/< https://static.domain.com/js/select2.js:3131:7 S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7 S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:627:7 S2</</Select2.prototype.trigger https://static.domain.com/js/select2.js:5472:5 S2</</Select2.prototype._registerResultsEvents/< https://static.domain.com/js/select2.js:5298:7 S2</</Observable.prototype.invoke https://static.domain.com/js/select2.js:637:7 S2</</Observable.prototype.trigger https://static.domain.com/js/select2.js:631:7 S2</</Results.prototype.bind/< https://static.domain.com/js/select2.js:1210:7 jQuery.event.dispatch https://static.domain.com/js/jquery-2.2.4.js:4751:16 jQuery.event.add/elemData.handle https://static.domain.com/js/jquery-2.2.4.js:4564:6