javascriptjquery-select2amdjs-amd

AMD / select2 behavior discrapancy?


I am trying to modify the select2/AMD example here: https://stackoverflow.com/a/31600521/567736 and I'm not sure whether the issue I'm running into has to do with select2 or whether I am misunderstanding AMD. My code:

$.fn.select2.amd.define("InlineSearchSelectionCustomAdapter", [
    "select2/utils",
    "select2/selection/multiple",
    "select2/dropdown/search",
],
    function (Utils, MultipleSelection, Search) {
        let adapter = Utils.Decorate(
            MultipleSelection,
            Search
        );

        return adapter;
    }
);

$.fn.select2.amd.require([
    'select2/selection/multiple',
    'select2/selection/search',
    'select2/utils',
    'InlineSearchSelectionCustomAdapter'
], function (MultipleSelection, Search, Utils, InlineSearchSelectionCustomAdapter) {

    let SelectionAdapter = Utils.Decorate(
        MultipleSelection,
        Search
    );

    $('.inline-search-original').select2({
        selectionAdapter: SelectionAdapter
    });

    $('.inline-search-amd').select2({
        selectionAdapter: InlineSearchSelectionCustomAdapter
    });
});
.select2-selection__choice__remove {
    display: none !important;
}

.select2-container--focus .select2-autocomplete .select2-selection__choice {
    display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<p>With an inline search box, original</p>
<select style="width: 200px" class="inline-search-original" multiple>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

<p>With an inline search box, using amd</p>
<select style="width: 200px" class="inline-search-amd" multiple>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

As you can see, I am trying to refactor SelectionAdapter into a separate module InlineSearchSelectionCustomAdapter. However, the look and behavior of my new <select> is different from the one from the original stackoverflow post.

Why is the behavior different and how to do I correct my error?


Solution

  • Import select2/selection/search instead of select2/dropdown/search

    $.fn.select2.amd.define("InlineSearchSelectionCustomAdapter", [
        "select2/utils",
        "select2/selection/multiple",
        "select2/selection/search",
    ],
        function (Utils, MultipleSelection, Search) {
            let adapter = Utils.Decorate(
                MultipleSelection,
                Search
            );
    
            return adapter;
        }
    );
    
    $.fn.select2.amd.require([
        'select2/selection/multiple',
        'select2/selection/search',
        'select2/utils',
        'InlineSearchSelectionCustomAdapter'
    ], function (MultipleSelection, Search, Utils, InlineSearchSelectionCustomAdapter) {
    
        let SelectionAdapter = Utils.Decorate(
            MultipleSelection,
            Search
        );
    
        $('.inline-search-original').select2({
            selectionAdapter: SelectionAdapter
        });
    
        $('.inline-search-amd').select2({
            selectionAdapter: InlineSearchSelectionCustomAdapter
        });
    });
    .select2-selection__choice__remove {
        display: none !important;
    }
    
    .select2-container--focus .select2-autocomplete .select2-selection__choice {
        display: none;
    }
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
    
    <p>With an inline search box, original</p>
    <select style="width: 200px" class="inline-search-original" multiple>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
    </select>
    
    <p>With an inline search box, using amd</p>
    <select style="width: 200px" class="inline-search-amd" multiple>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
    </select>