Dropdown not closing when using custom adapter

Hey

I created my box with

$('select').select2()

. To style the dropdown, I specified containerCssClass in the options,

*$('select').select2({
    containerCssClass: 'select2-side-services-phone-time'
});

but the dropdown does not receive the class for some reason, also the console shows no error. Next try was to change the dropdown attachment to the container instead of the body which was really a hassle

$.fn.select2.amd.require([
    "select2/utils",
    "select2/dropdown",
    "select2/dropdown/attachContainer"
], function (Utils, DropdownAdapter, AttachContainer) {
    $('select').select2({
        dropdownAdapter: Utils.Decorate(DropdownAdapter, AttachContainer)
    });
});

. The dropdown now is created in place and I can style it accordingly but it does not close anymore. Not with the escape key, not when losing focus, not when chosing an item. Adding the option closeOnSelect: true did not help as well.

Any idea what I am doing wrong?

[digitalsounds]

I’ve managed to make this work using the following code:

$.fn.select2.amd.require([
    "select2/utils",
    "select2/dropdown",
    "select2/dropdown/attachContainer",
    "select2/dropdown/search",
    "select2/dropdown/closeOnSelect"
], function (Utils, DropdownAdapter, AttachContainer, DropdownSearch, CloseOnSelect) {
    MyCustomAdapter = Utils.Decorate(
        Utils.Decorate(
            Utils.Decorate(
                DropdownAdapter,
                DropdownSearch
            ),
            AttachContainer
        ),
        CloseOnSelect
    );

    $('select').select2({
        dropdownAdapter: MyCustomAdapter
    });
});

[videsignz]

@digitalsounds Dude, you are a life saver. I was just struggling with the closeOnSelect being attached to the container. It would work as is but I would lose the search decorator, or vice versa depending on the order I would call them.

Here is my final setup, with your helper code…notice the select initialization is separate for more portability.

$.fn.select2.amd.define('select2/customDropdownAdapter', [
  "select2/utils",
  "select2/dropdown",  
  "select2/dropdown/closeOnSelect",
  "select2/dropdown/attachContainer",
  "select2/dropdown/search",
], function (Utils, DropdownAdapter, CloseOnSelect, AttachContainer, DropdownSearch) {

    var CustomAdapter = Utils.Decorate(     
        Utils.Decorate(
            Utils.Decorate(
            DropdownAdapter,
            DropdownSearch  
            ),
            AttachContainer         
        ),
        CloseOnSelect
    );

    return CustomAdapter; 

});

var CustomAdapter = $.fn.select2.amd.require('select2/customDropdownAdapter');

$('select').select2({
    dropdownAdapter: CustomAdapter
});