Login/Register
Select2 tags limit input characters in IE browser
Asked Answered
Solved javascriptinternet-explorerjquery-select2
S

1

11

I try to use the newest select2 v4.0.3 library in a web page. I used the given example on this page for tagging and tokenization. I tested it in different browsers. It works fine, but in Internet Explorer v.11 it behaves strangely:

I tried to add a new element which was not among the options. After typing a few characters, the cursor was taken away and I was not able to finish the word I was typing in. When I clicked into the select box to gain back the cursor, the half-entered word disappeared. So it seems to be impossible to type in more then 3-4 characters. I experienced the same on select2.github.io/examples page when opening it in IE.

<html>
<head>
    <link rel="stylesheet" href="css/select2.css" type="text/css" />
    <script src="js/jquery-2.1.0.js" type="text/javascript"></script>
    <script src="js/select2.full.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".js-example-tokenizer").select2({
          tags: true,
          tokenSeparators: [',', ' ']
        });
    });
    </script>
    <select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>
</body>
</html>

Without using the tagging, select2 works fine in IE as well. But I would like to use a multi-select, tagged control where the user can enter free text as selected option also.

Is there a workaround for select2 to use it with tagging and tokenization in IE as well?

Fiddle example to use on IE11 for testing.

The issue on GitHub related to the problem.

Spermary answered 3/2, 2017 at 23:40 Comment(6)
Hi, please see select2.github.io/community.html for instructions for getting support for select2.jquery. <quote>I tried to add a new element which was not among the options</quote> Yes, of coarse.... you can't select something that is not in the list... You may have Carot browsing turned on in IE... f7 to toggle it. Other browsers don't have Carot browsing (optional third party addons in chrome). – Massey
OK, but according to the documentation, the 'Automatic tokenization' part on the example page says that tokenSeparators property with enabled tagging is exactly for this reason I suppose: for selecting an element that was not in the list. And this is working fine in all browsers I tested, except IE... – Spermary
I opened an issue on github – Spermary
Using the earlier version 4.0.2. resolved the issue – Spermary
Plugin vendors are responsible for the interoperability of their products with web browsers.... did you inform select2 that their product does not work as expected in MSIE 11. – Massey
@RobParsons yes i did: opened a ticket on github, explaining the problem with example code and also referring to their own example page where the same issue can be reproducible. – Spermary
Z
6

These two classes : select2-container--focus select2-container--open are on the input's container respectively when the input element has the focus and when the options dropdown menu is open.

When we begin to type, the opening of the dropdown menu make the input element lost the focus (blur). Select2 needs to re-focus on the element. In fact, in the Select2 source code, we can see that the update method finish by re-focus on the element : this.$search.focus() (check here).

This code works fine in most browsers, but not in IE v11 because IE doesn't arrive to re-focus on the input with this Select2 source code. The class select2-container--focus disappears and the focus stay on the dropdown menu, which creates the bug.

In more recent version of Select2, it looks like they tried a fix : check here. Sadly, after test it, it is still not working. The only solution that i see here is to override the Select2 source code until a fix is released. Otherwise, you need to use a version where the bug is not present (e.g. 4.0.2 as mentionned in comments).

Based on GitHub issues (in particular this one : GitHub issue), a solution could be :

JS Fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script type="text/javascript">
  // Override update method
  $.fn.select2.amd.require._defined['select2/selection/search'].prototype.update = function(a, b) {
    var c = this.$search[0] == document.activeElement;
    this.$search.attr("placeholder", "");
    a.call(this, b);
    this.$selection.find(".select2-selection__rendered").append(this.$searchContainer);
    this.resizeSearch();
    if (c) {
      var self = this;
      window.setTimeout(function() {
        self.$search.focus();
      }, 0);
    }
  };

  $(document).ready(function() {
    $(".js-example-tokenizer").select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });
  });
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
Zayas answered 6/10, 2018 at 23:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.