Custom adapter search-box does not have class select2-search--hide

How Do I...
#1

Hi,
I am currently trying to add a header over the search box input with a Custom Adapter.

This works fine but the search-box is also appearing on Select2 that have data-minimum-results-for-search="Infinity". They do not have any select2-search--hide to hide the search-box inputs.

What am I missing to fix this and only show the search-box when minimumResultsForSearch is lower than the number of selectable elements ?

// ADAPTER
$.fn.select2.amd.define("SingleSelectSearchAdapter", [
        "select2/utils",
        "select2/dropdown",
        "select2/dropdown/attachBody",
        "select2/dropdown/attachContainer",
        "select2/dropdown/closeOnSelect",
        "select2/dropdown/minimumResultsForSearch",
        "select2/dropdown/search"
    ],
    function(Utils, Dropdown, AttachBody, AttachContainer, Search, CloseOnSelect, MinimumResultsForSearch) {

        // Decorate Dropdown with Search features
        let dropdownWithHeader = Utils.Decorate(Dropdown, Search);

        dropdownWithHeader.prototype.render = function () {
            let $rendered = Dropdown.prototype.render.call(this);

            let headerTitle = this.options.options.headerTitle ? this.options.options.headerTitle : "Sélectionnez une option";

            let $search = $(
                '<span class="select2-custom-header">' +
                '<span class="select2-custom-header__title">'+ headerTitle +'</span>' +
                '<span class="select2-custom-header__close"></span>' +
                '</span>' +
                '<span class="select2-search select2-search--dropdown">' +
                '<input class="select2-search__field" type="search" tabindex="-1"' +
                ' autocomplete="off" autocorrect="off" autocapitalize="none"' +
                ' spellcheck="false" role="textbox" />' +
                '</span>'
            );

            this.$searchContainer = $search;
            this.$search = $search.find('input');

            $rendered.prepend($search);

            return $rendered;
        };

        // Decorate the dropdown+search with necessary containers
        let adapter = Utils.Decorate(dropdownWithHeader, AttachContainer);
        adapter = Utils.Decorate(adapter, AttachBody, CloseOnSelect, MinimumResultsForSearch);

        return adapter;
    }
);


// INSTANCES
    $('select').select2({
        placeholder:             '',
        language:                "fr",
        // Add search box in dropdown
        dropdownAdapter: $.fn.select2.amd.require("SingleSelectSearchAdapter")
    });

<!-- Element with search-box -->
  <select name="selectWithSearchBox" id="selectWithSearchBox" data-placeholder="With Search Box" data-allow-clear="1" data-dropdown-auto-width="1" data-minimum-results-for-search="1" data-header-title="Select a country">
    <option></option>
    <option value="1">
      Option 1
    </option>
    <option value="2">
      Option 2
    </option>
    <option value="3">
      Option 3
    </option>
    <option value="4">
      Option 4
    </option>
    <option value="5">
      Option 5
    </option>
  </select>

  <!-- Element without search-box -->
  <select name="selectNoSearchBox" id="selectNoSearchBox" data-placeholder="No Search Box" data-allow-clear="1" data-dropdown-auto-width="Infinity" data-minimum-results-for-search="1" data-header-title="Select a country">
    <option></option>
    <option value="1">
      Option 1
    </option>
    <option value="2">
      Option 2
    </option>
    <option value="3">
      Option 3
    </option>
    <option value="4">
      Option 4
    </option>
    <option value="5">
      Option 5
    </option>
  </select>
#2

Ideally, I would like check if showSearch condition is true or false, and use custom adapter if true.

#3

Are these attribute values correct?

data-dropdown-auto-width="Infinity" 
data-minimum-results-for-search="1"

I think you have “Infinity” in the wrong place.

#4

Oups. My bad. Thanks for your answer.