Select2 jQuery animated resize (with jsFiddle!); can we delay default event somehow or make it resize properly?

Question

I am trying to change the size of a select2 element, but it doesn't seem to be working properly (the drop-down is not resized correctly). One approach I considered, and tried, was using preventDefault() on .open, but then how do I get the default even to fire after the animation is completed? I also tried to hide and then show the select2 dropdown, but couldn't seem to get that to work either. I have a jsFiddle, as well as code here, please help :)

jsFiddle: http://jsfiddle.net/acpFh/2/ (as you can see, clicking in the select2 field resizes the top part, but not the dropdown)

Code:

$(function(){
    var $searchBox = $('#search_box');

    $searchBox.select2({
            width: '168px',
            minimumInputLength: 2,
            openOnEnter: false,
            closeOnSelect: true,
            placeHolder: 'Search',
            query: function (query) {
                var data = {results: []}, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) {s = s + query.term;}
                    data.results.push({id: query.term + i, text: s});
                }
                query.callback(data);
            }
    }).on('open',function(){ // <---- this stuff!!! ########################
        var $s2SearchBox = $('#s2id_search_box');
        $s2SearchBox.animate({
                left: -133,
                width: 300
            },
            function(){ // complete
                $s2SearchBox.width(300);

            });


    });


});​

Cheers, and thanks in advance for any help!

Answer 1

Solved! (thanks to the developer "ivaynberg" himself).

https://github.com/ivaynberg/select2/issues/469

http://jsfiddle.net/acpFh/6/

$(function(){
    var $searchBox = $('#search_box');

    $searchBox.select2({
            width: '168px',
            minimumInputLength: 2,
            openOnEnter: false,
            closeOnSelect: true,
            placeHolder: 'Search',
            query: function (query) {
                var data = {results: []}, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) {s = s + query.term;}
                    data.results.push({id: query.term + i, text: s});
                }
                query.callback(data);
            }
    }).on('open',function(){ // <---- this stuff!!! ########################
        var $s2SearchBox = $('#s2id_search_box');
        $s2SearchBox.animate({
                left: -133,
                width: 300
            },
            {step: function() {
                $searchBox.select2("positionDropdown");
              },
            complete: function() {
                $searchBox.select2("positionDropdown");
            }
             });


    });


});​