clicking on scrollbar in ie10 causes dropdown to close

[ghost]

In the bottom demo (selecting states) on http://brianreavis.github.io/selectize.js/, clicking on the scrollbar in IE10 will cause the dropdown to close. I've tested it on IE10 on windows 7 and windows 8. The click triggers a blur event that somehow needs to be ignored by selectize. For comparison, select2 doesn't seem to have this issue, but I'm not quite sure how it's avoiding it. Works fine on Firefox, Chrome and Safari/IOS.

[brianreavis]

Duplicate of #157 (but I'll close that issue instead... this one is more specific).

[nesl247]

Issue also exists on IE11 on Win 8.1.

[sunrongshuai]

Any idea for this issue?
I guess it is an issue about javascript bubble(cancelBubble\stopPropagation) one, but i can't get the solution.

Thanks!
Richard

[locux]

This one is causing me some headache too with all versions of IE up to 11, has anyone discovered a fix?

[locux]

I'm not familiar with code management or if I can even put a code fix into github, but I was able to solve this issue. I would propose this fix (or something with the same result) be added to 0.8.6.

Here's the diff on dist/standalone/selectize.js (v0.8.5).

15a16
> var count=0;
1211a1213
>                                               count=1;
1215a1218
>                                               count=0;
1551a1555
>                       if(count==1) return;
2240d2243
<

Here's an example of it working including the full (updated) selectize.js code: http://jsfiddle.net/rdX5R/1/

There's still a little weirdness in IE where the width resizes on click, but I believe that's unrelated to this solution.

[nesl247]

locux's fix did work for me on 0.8.4.

[locux]

after-thought: my proposed patch puts the initial "var count=0;" within the sifter.js code. Should be down in the selectize.js section (around line 603).

[andoband]

In my case, IE is raising a Blur event on the text input control ($control_input in the script) when the scrollbar is clicked. In this case the dropdown_content div is gaining focus.

In v0.8.5 putting the following code into the onBlur function solved the issue. The line just resets focus to the input control and exits the function when it is the dropdown_content div that's gained focus.

dist/selectize.js (line 971):
dist/standalone/selectize.js (line 1555):

if (document.activeElement === self.$dropdown_content[0]) { 
    self.$control_input.focus(); 
    return; 
}

[vslinko]

@andoband @dhinus that fix doesn't work right in ie8
each click to scrollbar triggers input focus and move dropdown to selected value

[eliashdezr]

Sadly, this is not fixed in v0.9.0

[sreeyashu]

Dear anybody has found any solution for this I have been facing this issue on surface RT as well as it doesn't allow touch scroll even. It's like a blocking issue on IE. Select 2 supports this but I always go with this because it has lot of features but if this issue is also addressed this is going to rock on all the browsers and devices as well.

[lananelson]

@sreeyashu I have created a plugin that I am using while this issue still exists. It's a hack but last time I checked it worked. Try it out https://gist.github.com/lananelson/3247f07e1d663b4aeb69

see docs on how to use plugins

[sreeyashu]

Thanks lananelson. I will try this, but just want to check will this also supports on Windows phones.

[brianreavis]

This should be fixed in v0.10.0 and above.

[chennakrishnaa]

Thanks for this Fix. This is solving many blocking issues in the IE. However there is still an issue in the touch enabled desktops in Windows8/ RT Tablets. When the user drags the drop down (on the drop down content not on the scroll bar) in these devices, it is selecting the respective element instead of scrolling. Upon investigation, these devices are generating mousedown event on touch start. As a result an item is selected and closing instead of scrolling.
When we change the below code in line 626

$dropdown.on('mousedown', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); });

to

$dropdown.on('mousedown', '[data-selectable]', function(e) { e.stopPropagation(); });
$dropdown.on('click', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); });

Basically changing the mousedown event to click event and stopping the propagation on mousedown is working.

Is there any reason an item is selected on mousedown instead of click?

[swetakanodia]

Hi,

I am getting the same issue on IE9. Mine is javaScript code and not jQuery.
On clicking the scrollbar, the dropdown is closing.
Kindly help

[mwentz]

FYI, we ran into this exact issue with 0.12.0 and it turned out to be a javascript conflict. The conflict was with the Google Polymer Project Paper elements, using Bower. I don't think there's any need for this issue to be addressed on the selectize.js side, but I wanted to bring this up in case there is, and also I thought this might be helpful for anybody that finds this ticket and is using 0.10.0+.

[rohansahai]

hmm having this issue in 0.12.1 ...

I never make it in here - https://github.com/selectize/selectize.js/blob/master/dist/js/selectize.js#L1064 because document.activeElement appears to be the parent element of self.$dropdown_content[0].classList. Still digging into to try and figure out what's going on but if anyone has run into this please let me know! @mwentz did your j conflict have this side affect or unrelated?

EDIT - I think this there is conflicting css on my side

[seb-grant]

I have the same issue as @rsahai91 - have patched my local copy to check activeElement for the dropdownClass instead.

This solution works for me, but I'm not sure how the equality check (document.activeElement === self.$dropdown_content[0]) works for some users and not for others.