IE breaks when using a multiple select with a placeholder

[masfoobar]

I am new to using Select2. I do not see this bug listed so apologies if one is already created.

I consider this a high priority bug as IE11 is a modern browser. (I do not see a priority option on this page so assume github does not support such feature?)

This bug appears in the following browsers: -
IE11 (real)
IE10 (from IE11 compatibility mode)

IE9 and earlier (from IE11 compatibility mode) does not appear to have this bug.

Firstly, you can replicate this bug simply by going to https://select2.github.io/examples.html. Go to the Placeholders section, This is the 3rd section after 'The basics' and 'Multiple select boxes'.
In IE11, simply click on the multiple select box. This is the box underneath the comment about the Placeholders.js polyfill. Now click outside the select box to lose focus.... It forces itself back into the select box.

One of the few ways to stop the items from popping up is to select an item in the list. However, once you have deleted all items (so there is nothing left) -- your back to the problem.

I believe this provides enough information to replicate the problem. Of course, if you have any further questions -- please feel free to shout!

Edit: -- It looks like this issue is tied to using the placeholder in a multiselect.. For example, the multi select in the 'Programmatic access' section, which does not use a placeholder, appears to be working fine.

M

[kevin-brown]

I am new to using Select2. I do not see this bug listed so apologies if one is already created.

This is definitely the third ticket I've seen about this, but this is the best explanation so far (so it's going to live).

I currently am not using Windows (so I can't easily test this), but I'll gladly review a pull request that fixes this issue.

[jjanusch]

@kevin-brown You're probably already aware, but MS has virtual machines for each version of IE available. It's not as convenient as using Windows directly, but it does allow you to test on it.

https://www.modern.ie

[green-arrow]

Any progress on this issue?

Edit: Any quick workarounds on this, other than removing placeholders from all multi selects? 😄

[kevin-brown]

@green-arrow Still need to do testing with this, it's been a busy last two weeks.

A screencast may be useful in confirming this by the way, just in case I can't reproduce it on my own.

[green-arrow]

@kevin-brown anything in particular you want to see in the screencast?

[sgaertner]

I've encountered the same issue with IE10. When clicking outside of the opened drop-down to close it, handleSearch is called in IE10, triggered by an input event (4.0.0 line 1850). This input event isn't triggered e.g. in Firefox. handleSearch causes the drop-down to be reopened.

Seems to be caused by http://stackoverflow.com/q/18389732/359284

[kevin-brown]

Good news, I was finally able to get on a system with IE and reproduce this issue.

Now I just need to find out why it's happening...

[philltrue]

I managed to find the offending line in select2.full.js

this.$selection.on('keyup.search input', '.select2-search--inline',
        function (evt) {
      self.handleSearch(evt);
    });

Roughly line 1849 in Search.prototype.bind. Comment out self.handleSearch(evt) and this problem goes away. (I have search disabled however so this change may cause other issues)

Kevin if you're having trouble finding an system with IE, perhaps download the free virtual machines?
http://dev.modern.ie/tools/vms/

Hope that helps.

[kevin-brown]

Yesterday a few patches landed that might have fixed this issue. I spent a decent amount of time fixing the focus wars that would happen in multiple selects, and I have a feeling that was related to this issue.

If someone wants to test out the latest master, that would help determine if this is still an issue.

[acutemedical]

I'm sorry to troll on this thread, but thank you for sharing the IE virtual machines. I've been looking for a way to Browser test my apps on my MacBook. This is excellent!

[philltrue]

Hey Kevin,
I downloaded the latest select2-full.js and tried and didn't have any luck.

In the code you've added:

var key = evt.which;

Which is coming up as undefined in IE 11 when this bug occurs, adding in a

if(key == undefined) return;

Causes the issue to go away, but again, I have absolutely no idea about the internals of select2 so no idea what issues this might cause.

Hope that helps in some way.

[tylik1]

@philltrue Thanks this patch fixed the bug! Tested in IE 11.
Haven't encountered any other bugs on IE and other browsers. Probably I've missed something, but this is for sure better than removing placeholder in multiselect.

[fakocher]

@philltrue That fixed it too ! Thank you for the patch. Waiting for an official update though please devs :)

[srweal]

I'm not so sure that fixes the problem. I've put the lines

var key = evt.which;
if (key == undefined) return;

But now I can't type into the select2 control and have it filter my options. Anyone else seeing this effect of the patch?

[tylik1]

@srweal Unfortunately the same bug. I would like to offer different solution. I digged a little bit and found out that 'input' event is causing such behavior in IE. So my solution includes checking if browser is IE and disabling 'input' event. I know that the solution is NOT ideal, and probably typing on Windows Phone will not trigger filtering the select, but hope it's better than nothing:

//Check if browser is IE  
var isIE = (function () {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.indexOf("msie") > 0 || ua.indexOf("trident") > 0 ) {
        return true;
    }

    else {
        return false;
    }

}());

// If browser is IE, do not assign input event
var input_event = !isIE ? 'input' : '';

if (!isIE) {
    this.$selection.on('input', '.select2-search--inline', function (evt) {
    // Unbind the duplicated `keyup` event
        self.$selection.off('keyup.search');
    });
}


this.$selection.on('keyup.search ' + input_event, '.select2-search--inline',

//Rest of the code stays untouched

[molily]

ua.indexOf("edge") > 0

FYI, the problem does not occur on Edge in my tests with Windows 10 Pro Insider Preview Build 10162 on https://select2.github.io/examples.html and http://codepen.io/molily/pen/JdvjNZ

[tylik1]

@molily Thanks! Removed that line.

[kevin-brown]

So, just to confirm some things and perhaps get a solution prepared.

The issue is that in IE, the input event doesn't carry the key pressed (evt.which/evt.key/evt.keyCode), unlike other browsers?

[jancbeck]

One of my clients just notified me of a bug and I could confirm that this issue is the origin. I'm waiting for a fix to come and meanwhile disable multiple select like so:

var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./),
    select2options = {
        multiple: isIE11 ? false : true
    };
    $('select').select2(select2options);

[sirNemanjapro]

IE10 and IE11 problem still exits.

[videsignz]

If you add a placeholder on the search input when the drop down is attached to the container, it breaks. You can no longer close the drop down unless you choose a selection.

[videsignz]

For those of you having issues when the dropdown is attached to the container, I did a quick fix for only adding a placeholder to the search if its not IE. On line 3835, right below the search html, I added...

    // Temp Patch Start
    var msie = document.documentMode;
    var disableInputEvents = msie && msie <= 11;

    if(!disableInputEvents){
        $search.find('input').attr('placeholder', 'Search');        
    }
    // Temp Patch Finish

Not the best fix as it doesn't target the core problem, but it works for now.

[Curtisdhi]

This issue was closed, but the issue still occurs. Tested with select2 4.0.3

[tekiegirl]

Agree with @Curtisdhi still getting this issue in 4.0.3 :(

[lalwanikamal165]

Is the issue fixed?

[alexweissman]

I'll reopen this for now. Not sure if it's related to #4860?

[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.

[hasi94]

is this bug fix ?

[SrujanaPhani]

The issue still exists in IE-11 !

[dimitarbikov]

Few years late to the show, but the issue seems to be still there.
Can anyone confirm, or should I look into my own code?