Skip to content

search function breaks select2 when using a custom scrollbar #4790

@ChazyTheBest

Description

@ChazyTheBest

(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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions