Click on scrollbar closes dropdown list in IE inside a bootstrap modal #592
Description
When the selectize control is inside a bootstrap modal, the following fix doesn't work:
// necessary to prevent IE closing the dropdown when the scrollbar is clicked
if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) {
self.ignoreBlur = true;
self.onFocus(e);
return;
}
The fix is not applied because document.activeElement is the bootstrap modal element
instead of the selectize dropdown content. So it seems the document.activeElement === self.$dropdown_content[0] condition does not cover all cases.
Here the plugin I made to fix it (maybe a bit too much, but it's what I found to work):
Selectize.define('fix_dropdown_click_outside_item', function(options) {
var self = this;
var _setup = self.setup;
self.setup = function() {
var $document = $(document);
_setup.apply(self, arguments);
// Fix problem with the ignored click events in the toolbar
$document.off('mousedown' + self.eventNS);
$document.on('mousedown' + self.eventNS, function(e) {
if (self.isFocused) {
// prevent events on the dropdown scrollbar from causing the control to blur
if (self.$dropdown.is(e.target) || self.$dropdown.has(e.target).length > 0) {
self.ignoreFocus = true;
window.setTimeout(function(){
self.$control_input[0].focus();
}, 0);
return false;
}
// blur on click outside
if (!self.$control.has(e.target).length && e.target !== self.$control[0]) {
self.ignoreFocus = false;
self.blur();
}
}
});
};
});