select2: Focus is lost while entering tags in Internet Explorer (IE11)

I have resolved this problem in the Select2 source. The issue is that IE 11 needs a little extra help re-focusing the search input. The fix is to call $search.focus() (from search.js - Search.prototype.update function) in a timeout, fixed code below:

Search.prototype.update = function (decorated, data) {
    var searchHadFocus = this.$search[0] == document.activeElement;

    this.$search.attr('placeholder', '');

    decorated.call(this, data);

    this.$selection.find('.select2-selection__rendered')
                   .append(this.$searchContainer);

    this.resizeSearch();
    if (searchHadFocus) {
      var self = this;
      window.setTimeout(function() {
        self.$search.focus();
      }, 0);
    }
  };

Any glance of when we can expect fix for this to be live?? I have same issue occurring in IE11

I’ve pulled 4.0.6-rc.1 and have confirmed that, while it does contain the pull-request that is said to fix the issue, that the problem still exists in IE11. The symptoms are exactly as described in the original comment.

I am using 4.0.7 and I can reproduce this issue in Chrome and Safari. works fine on 4.0.0

This issue still seems to be in the code base, and the PR #5161 was closed without merging due to files in the dist folder.

I have pinned my work to 4.0.2 which seems to not have the issue (as per the comments above), but will this be fixed in a new version?

I’d be happy to submit a PR with the changes from #5161, but the code would not be mine!

Confirmed—reverting to 4.0.2 worked for me. Thanks all 😃

This issue is still happening in 4.0.8. Works fine in Chrome, not usable in IE11.

• Click in the select box -> Cursor starts blinking, “No results found” is displayed as the first result -> OK
• Type the first char (e.g. a) -> a is visible in the entry field and also as the first result, cursor blinks after the char -> OK
• Type the next char (e.g. b) -> ab is visible in the entry field and also as the first result, but cursor does not blink after the char -> ??
• Type the next char (e.g. c) -> Nothing happens anymore, obviously the focus is somehow lost. Clicking in the entry field again clears it and the input is lost.

I noticed that this mostly happens after the second char, sometimes after the first and - if you type very fast or paste something - even later (as shown in the video below).

Here is a video demonstration:

I have a very minimal jsfiddle reprocuding the problem here: https://jsfiddle.net/8p1wyjvg/7/ Or with your jsbin template here: https://jsbin.com/sihanoquce/1/edit?html,css,js,output

This happens on select2 versions 4.0.3, 4.0.4, 4.0.5, 4.0.6 and 4.0.8. It does not happen in 4.0.7 though, at least in the example. In the real world application I use select2 in ist still happens in 4.0.7 (still have to figure out in which exact circumstances…)

I “fixed” it by going back to 4.0.2 for now, but would really appreciate a long term solution.

FYI, this also required a minor change to the test case search.tests.js - test(‘updating selection does not shift the focus’:

  ...
  setTimeout(function() {
    assert.equal(
      document.activeElement,
      $search[0],
      'The search did not have focus after the selection was updated'
    );
  }, 0);
  ...

Good idea, I just checked and it worked all the way up to 4.0.2-rc.1, 4.0.3 is the first tag where the problem occurs. Actually I just bisected the issue and it turns out the following commit introduced the problem: ea79a197e0ffe55aa600eed6d18cbd1c804c3176. The commit is not very long, hopefully you can quickly see what goes wrong. Thanks for your help!