Selectize.js: IE 11 firing onBlur when scrolling the dropdown content

[ghost]

When testing our app in IE 11 we found that clicking on the scrollbar in the selectize dropdown content caused the dropdown to close. Other browsers did not have this behaviour.

I tracked the issue down to the blur event on the text input. IE fires the blur event when you click on the scrollbar, other browsers do not.

I found some code in onBlur which seemed like it was designed to detect this and prevent the selectize dropdown from closing:

 } else if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) {
    // necessary to prevent IE closing the dropdown when the scrollbar is clicked

However it wasn't working (for us at least) because document.activeElement was the <div class='selectize-dropdown single' ...> and self.$dropdown_content[0] was the <div class='selectize-dropdown-content'>, i.e. the child of the first div.

I was able to fix this by adding the .parentElement blow.

 } else if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0].parentElement) {
    // necessary to prevent IE closing the dropdown when the scrollbar is clicked

This issue is present in 0.12.0 and 0.12.1.

[bb1]

Could you make a pull request out of this? I have the same problem and your fix is working.
Affects IE11.

[Thorarin]

Your fix does not work for me.

When I try to scroll down in IE11, the onBlur function gets called twice. The first time matches the conditional of the original code, self.ignoreBlur is set to true.

The second event then closes the dropdown, because self.ignoreBlur is already true, no early exit from the function. What looks dodgy to me is that 2 lines higher, a check is done against self.ignoreFocus and not self.ignoreBlur. I have however not yet found a working solution.

[Thorarin]

I've made some changes that seem to fix the issue for me (see commit above). However, I only use limited functionality of the component. It's not tested extensively, so YMMV.

[lewishowles]

Just wanted to add that I spent quite a while chasing this bug down, including trying a lot of other things (removing all my JS and CSS to ensure there were no conflicts, and other fixes mentioned in closed bugs) but @d4nt's solution was the one that worked in the latest version of Selectize.

[KyorCode]

Unfortunately this is still an issue in IE10/IE11. Any hope on a fix?

[theodorapaja]

This fix was not working for me because document.activeElement was always returning as body. Instead of checking document.activeElement I'm now checking e.target against self.$control_input (not self.$dropdown_content) as follows:

} else if (!self.ignoreBlur && e && e.target === self.$control_input[0]) {
// necessary to prevent IE closing the dropdown when the scrollbar is clicked

(Note: I'm using v0.12.1 on IE11)
@KyorCode

[moussa-b]

I have this issue with IE 11 and the latest update version : 11.0.47 (KB4040685) which was released the 10.10.2017. I didn't have the issue with previous IE 11's update version 11.0.45 and 11.0.20.
For me solution given by @d4nt doesn't work but solution given by @theodorapaja works fine.

[worthy7]

Hi guys, I come from typeahead.
@theodorapaja what is $control_input? Is it an \

For me, the event is always the same. If clicking the background, or clicking the scrollbar. I checked most of the properties too, and they are the same. So the event is an unreliable thing to use now. Thanks M$!

I posted my current very dirty solution over yonder:
https://github.com/corejavascript/typeahead.js/issues/166

[neilmonroe]

Now this is interesting. I did not test in IE 11, but the only browser I tested that didn't hide the drop down when clicking the scrollbar was Edge. Windows Chrome and Firefox, and Mac Safari, Chrome and Firefox all hide the drop down after clicking on the scrollbar with the mouse.

iOS and Android browsers seem to not be affected because the touch event is most-likely being triggered on top of the drop down still.

I will post a fix if I find one that works across the board.

[worthy7]

That's quite odd, I can only imagine this is due to some deeper settings specific to selectize.js (which I'm not involved in), and whatever it is, is taken care of over in the typeahead.js repo. Perhaps you could take a look over there to get some idea's how to fix this repo?

[acromarco]

This bug can be probably solved by adding tabindex="-1" to the dom element which has the scrollbars.

[indrapolak]

I used @theodorapaja 's suggestion and that worked for me for IE 11.0.47; however it also broke something: now clicking on an option does not close the dropdown anymore.

Therefore this solution is far from perfect. The blur raised by the close of the option (after clicking an option) must be treaten different from the blur raised because you clicked on the scrollbar. Why does clicking the scrollbar trigger a blur event?

[worthy7]

Doesn't seem to be doing the trick, tabindex="-1" on the <option> tag right?

[fredrik-lundin]

Me and my colleague ended up with the following solution. This prevents the scrollbar from closing the dropdown menu in IE11 while still closing the dropdown when an item is selected. Also tested in chrome and firefox.

onBlur: function(e, dest) {
    var self = this;

    if (e && e.target === self.$control_input[0]) {
        return;
    }
    ......
}

[cphill02]

This seems pretty critical will it get fixed soon?
@fredrik-lundin 's fix work around worked for me.

[worthy7]

@cphill02 The tabindex="-1" stuff does work, I think it just has to be on the select element. (I did get it working in the end, and other JS solutions ended up lagging IE)

[yesmeck]

FYI, I opened a issue to Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15558714/

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.