Select2 loses focus after selecting Item

[PieterjanDeClippel]

Issue apparently already happened earlier: #4971.
However I haven't been bothered by it yet. All the time I've been using Select2, it's been working fine (v4.0.4 works fine)

Issue is available at the very demo page. Just start typing something, and select a suggested item. Notice that the Select2 loses focus. My version is v4.0.6-rc.1

[alexweissman]

I have confirmed that this problem is reintroduced in 4.0.6-rc.1. See this bin.

@PieterjanDeClippel in the future, you need to create a minimal, complete, and verifiable example using our JSBin template so that we can easily confirm these regressions.

[alexweissman]

The only change I can think of that might have introduced this bug, is the addition of blur in this commit. This was merged from #4680 without extensive testing. Could you please confirm if this is the culprit?

[s1lver]

Hi!
Select2 4.0.5

I seem to have a similar problem. In the IE (Edge) browser, there is a loss of focus. Multi-selection and tagging are enabled. Normally only the first value is entered, all subsequent ones on 1-2 characters lose focus.

[timblanq]

Hej :)
@alexweissman, the referenced commit seems not to be the issue.
I removed the line to test it out, but the behavior didn't change.

[kzkn]

Probably this commit. See this bin.

Here is a commit for the jsbin: kzkn@680984f

[timblanq]

@kzkn This fix doesn't seem to work for me…
But it works in your JSBin example. This one really starts to confuse me.

[kzkn]

@tallon1252 The commit edits dist/js/select2.js directly, and use this from the jsbin. Perhaps, you built it yourself?

[timblanq]

@kzkn I just removed the lines you mentioned in directly in the select2.js…

[kzkn]

Updated my hotfix-5185 branch. How is this?
I have tested on Firefox and Chrome (on Linux), works fine.

By the way, what is 45ee734 solving? Can we remove this?

[nino-s]

@alexweissman heyho alex, I am not at home actually to test it correctly, but @kzkn seems to be right.

Why should a 0 milliseconds delayed command should help while focusing? #45ee734 What happens is, that some parts of the code afterwards is executed even before self.$selection.focus(); is executed.

The focus function

window.setTimeout(function () {
  self.$selection.focus();
}, 0);

triggers the focus event

this.$selection.on('focus', function (evt) {
  self.trigger('focus', evt);
});

I may be wrong, but I think the problem is, that the delay causes the event evt to have a different relatedTarget as it would have without the delay

[fuzzbomb]

It also loses focus after deleting an item, in the multiple select time on the basic usage page.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[s1lver]

This issue is still relevant

[jmalatia]

+1

[HeppyEkberg]

+1

[mtaylor091]

I found that 45ee734 fixes and issue with scrolling when they have a select element open. Before this commit if the select element was open and you scrolled down the page and clicked a button or input it would scroll you back to the select. This check in lets the active element change and then it checks if its different before selecting focus again.

On the other hand, without the commit and active element check, it lets you tab through a form with a select element. Without it selecting the select2 element, it loses focus all together and you cant tab to the next input. In my case the active document is the body.

Somehow it needs to know that I just closed the select but I am still on select form versus I just closed the select because I am trying to type in another field or select a button while the select2 still has focus.

[mjlabe]

As a temporary fix, I got it to work with this:

$('.my_class').click(function () {
    $('.select2-search__field').focus()
});

[CemplexIT]

We've been having a similar issue - it turned out that the underlying select element was gaining focus. I believe that some of our CSS was doing something to make this happen but I couldn't find the culprit. We added a display none tag to the css for the class below that is applied when the select is turned into a select2 to fully hide the select and that seemed to do the trick for us.

.select2-hidden-accessible { display: none; }