Menu
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.
710
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
