Reset select2 on bootstrap modal close (v4.0.3)

#1 
Here is my code for setting up a select2

function setupCoinSelect() {

$('#coin').select2({

    placeholder: 'Select a coin',
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection,
    ajax: {
        type: "get",
        url: "/home/getcoinlist",
        dataType: 'json',


        processResults: function (data) {
            console.log(data);
            var arr = $.map(data, function (element) {
                return {
                    id: element.coinId,
                    text: element.name,
                    icon: element.icon,
                    lastPriceUsd: element.lastPriceUsd

                };  
            });
            console.log(arr);
            return { results: arr };
        },

    }


});

$('#coin').on('select2:select', function (e) {
    selectedCoin = e.params.data;

    if (selectedCoin) {

        $("#add-alert-current-coin-price").text(selectedCoin.lastPriceUsd);

        addAlertValuesChanged();
        $("#add-alert-options").fadeIn();

    }
});

}

and here is the code i use to reset it

$('#add-alert-modal').on('hidden.bs.modal', function () {

   $("#coin").select2('data', null);
   $("#select2-coin-container").text("Select a coin");
});

What happens is that the control seems to have been reset but let say I have selected “Item 1” before closing the model, if i open the model again and search (ajax) and pick “Item 1” again it suppose to work but it doesnt seem to do anything, however if i choose a different Item every time after a close then it works, it seems that the control somehow retains some data for the item selected and when the same item is selected twice (before and after a close) it does nothing

My question is, what is the correct way to reset a control complete.
I have actually tried destroying the control and recreating it on close but that doesnt seem to work either

#2

Assuming this is still an issue for you, I have a couple of thoughts (although these are just educated guesses; I’ve never tried to do what you’ve described).

When you say that after the “reset”, choosing the same item “doesn’t seem to do anything”, do you mean that your “select2:select” event handler doesn’t fire? If so, I think that you’re right that the widget is holding the selected element (perhaps somewhere in memory apart from the widget itself and/or the underlying HTML select element).

Since you’ve confirmed that the AJAX call in fact runs again, I wonder if you could “trick” it into thinking that all of the returned options are unique from any the widget has seen before by making the “id” property unique every time. For example, you could record the current timestamp (i.e., Date.now() in a variable, and add it (mathematically) to the “coin.id” value. That will generate a unique set of “id” properties for the Select2 data every time the widget loads any data. My theory is that this would cause the Select2 widget to believe that the item with the same value (“item 1” in your example) was in fact a different item from the one you had previously selected.

Also, I don’t think your method of resetting the Select2 widget is correct. The select2() function only takes an Object as a parameter. So you need something like $("#coin").select2({'data': null});. After that, you should trigger the “change” event on the HTML select element: $("#coin").trigger("change");, to cause the select to recognize the fact that there is no data in the widget (which should remove all the options from the select, and should also clear any current selection.