closeOnSelect = false does not work when minimumInputLength > 0

[shiznit013]

The dropdown will close on select. I have created a jsfiddle to demonstrate the behavior.

This worked in 3.4.5. I believe (although have not confirmed), that this may have been broken by pull request https://github.com/ivaynberg/select2/pull/1940

[mkurz]

Works for me (Chrome, Firefox). Which browser are you using?

[shiznit013]

This does not work for me in Chrome, Firefox, or IE, but perhaps my understanding of how it is supposed to work is incorrect.

When I type 'O', the dropdown appears with all results matching 'O'. When I select an item, I expect the dropdown to remain open since closeOnSelect = false. What happens is, the filter text, 'O', is cleared, and the dropdown closes. This is frustrating to my users, since they want to select multiple items that match the same filter. They need to re-enter the filter text, select the next item, repeat; which can be quite time consuming. For me it is frustrating, because each filter means a request to the database (not seen in the fiddle). So, I need to have at least 1 database call for every item selected.

[kevin-brown]

I am able to reproduce this, though I'm not entirely sure where the dropdown gets closed.

[dsueltenfuss]

It appears to be closing because the entered text is getting cleared at line 2890, regardless of if closeOnSelect is set to false

[seiyria]

I also encountered this bug today in the latest Chrome.

[ghost]

me too..when I have minimumInputLength set

[Cheruman]

I'm having the same issue in both the latest Chrome and IE8: https://github.com/ivaynberg/select2/issues/2512

[khaled-su]

I have the same problem

[gildonei]

This isn't working for me too. I'm using the latest chrome version.

[Demak]

Hello, I am experiencing this issue too, it's especially a problem with an ajax-retrieved results. I have found that this is caused by a onSelect method of MultiSelect2 class, specifically by
line 2984: this.clearSearch();
After result have been cleared, select closes because there is not enough characters in input. Making a check for options before calling it or just commenting it out seem to resolve issue and do not break anything.
Select2 Version: 3.5.1

[Zoomink]

Any idea if this will be solved anytime soon? What can we do meanwhile?

[snichini]

I've fixed this by replacing

this : (lines 3003 to 3011)

this.clearSearch();
this.updateResults();
if (this.select || !this.opts.closeOnSelect) this.postprocessResults(data, false, this.opts.closeOnSelect===true);

        if (this.opts.closeOnSelect) {
            this.close();
            this.search.width(10);
        } else {

by this :

this.updateResults();
if (this.select || !this.opts.closeOnSelect) this.postprocessResults(data, false,   this.opts.closeOnSelect===true);

if (this.opts.closeOnSelect) {
            this.clearSearch();
            this.close();
            this.search.width(10);
 } else {

I've just moved the "clearSearch();" when closeOnSelect is set to true.
It worked fine to me.
Because the clearSearch(); flushes the search in the

and the this.countSelectableResults() is always 0 because the ul is flushed above.

Hope it helps anyone. I'm not sure if this breaks something else so I don't have make a pull request.

[zormandi]

This is a blocker for one of our clients. Any ideas on when an official fix will be available?

[inieves]

Hi. I can confirm the above fix by snichini worked for me... i had the same problem.. i can now have the search term remain even after selecting some options... with the minimum number of search characters set to 2.

[Cheruman]

I can also confirm snichini's fix worked for me.

[AtomStar]

This does not work in v4.0 beta2. @snichini fix is for v3.5. I did the following hack on lines 3384-3388 in v4, which seems to work:

       Dropdown.prototype._onSelect = function () {
            if (this.options.options.closeOnSelect == false)
                return;
            this.trigger('close');
        };

[kevin-brown]

@AtomStar If you want to roll that up into a decorator, it'd save me the time of adding it back myself. It shouldn't take too long and you can use #2914 as an example for adding in the option.

I was planning on adding it back for 4.0, but haven't had the time.

[amamf]

The above fix provided by snichini doesn't work for me (3.5.2). It works for the first item only, when I select the second item the search results get closed. I came up with a different solution that works for me. The idea is not to update search results if they shouldn't be closed on select:

           // keep track of the search's value before it gets cleared
            this.nextSearchTerm = this.opts.nextSearchTerm(data, this.search.val());

            this.clearSearch();

            if (this.select || !this.opts.closeOnSelect) this.postprocessResults(data, false, this.opts.closeOnSelect===true);

            if (this.opts.closeOnSelect) {
                this.updateResults();
                this.close();
                this.search.width(10);
            } else { ...

[AlexRocks]

If you do not want to hack the select2 3.5 code then following work ('select2-selecting' event launch before close event so we can manually close/open):

        $("#category_id").on("select2-selecting", function(e) {
            e.preventDefault();
                uploadSubCats(e.val).then(function(res) {
                    if (res.status == "ok") {
                        if (res.data === 0) {
                            $('#category_id').select2("val", val);
                            $('#category_id').select2("close");                                
                        } else {
                            $('#category_id').select2({"data": res.data});
                            $('#category_id').select2("open");
                        }
                    }
                });                                   

[joergrech]

@AlexRocks Can you clarify what "uploadSubCats" is doing? Your code itself is not working as this method is missing.

[spycom]

@AlexRocks Thanks a lot, your code helped me to finish this fix

$("#object-select").on("select2-selecting", function(e) {
                e.preventDefault();
                var target = $(this);
                handleSelection(e, target);
});

function handleSelection(e, target){

                e.preventDefault();

                var data = target.select2('data');
                data.push({
                            'id': e.object.id,
                            'text': e.object.text
                        });

                target.select2('data', data);
                target.select2("open");
            } 

[burakcakirel]

Thank you @spycom
Our legacy code is still using select2 v3.x so your piece of code saved us. Also, I want to add one line to your fix.
After that:
target.select2("open");
Put this line:
target.select2("positionDropdown");
With doing this, the result dropdown's position will adjust as the input's position

[pedrofurtado]

The issue is related to 3.x version, but the version 3.x is not maintained anymore. But if this bug occurs in 4.x version, please reopen the issue and send us a JSFiddle example code or a PR.