From e5792126a839095e00a743a5bade38caabeac4e5 Mon Sep 17 00:00:00 2001 From: Douglas Pouk Date: Mon, 6 Jun 2022 17:43:50 -0500 Subject: [PATCH] Issue #1689, change selectize behavior to work inside modals. --- src/selectize.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/selectize.js b/src/selectize.js index 2bddb395e..73b5afea8 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -135,7 +135,7 @@ $.extend(Selectize.prototype, { $wrapper = $('
').addClass(settings.wrapperClass).addClass(classes).addClass(inputMode); $control = $('
').addClass(settings.inputClass).addClass('items').appendTo($wrapper); - $control_input = $('').appendTo($control).attr('tabindex', $input.is(':disabled') ? '-1' : self.tabIndex); + $control_input = $('').appendTo($control).attr('tabindex', $input.is(':disabled') ? '-1' : self.tabIndex); $dropdown_parent = $(settings.dropdownParent || $wrapper); $dropdown = $('
').addClass(settings.dropdownClass).addClass(inputMode).hide().appendTo($dropdown_parent); $dropdown_content = $('
').addClass(settings.dropdownContentClass).attr('tabindex', '-1').appendTo($dropdown); @@ -190,10 +190,10 @@ $.extend(Selectize.prototype, { self.$dropdown = $dropdown; self.$dropdown_content = $dropdown_content; - $dropdown.on('mouseenter mousedown click', '[data-disabled]>[data-selectable]', function(e) { e.stopImmediatePropagation(); }); + $dropdown.on('mouseenter mousedown mouseup click', '[data-disabled]>[data-selectable]', function(e) { e.stopImmediatePropagation(); }); $dropdown.on('mouseenter', '[data-selectable]', function() { return self.onOptionHover.apply(self, arguments); }); - $dropdown.on('mousedown click', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); }); - watchChildEvent($control, 'mousedown', '*:not(input)', function() { return self.onItemSelect.apply(self, arguments); }); + $dropdown.on('mouseup click', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); }); + watchChildEvent($control, 'mouseup', '*:not(input)', function() { return self.onItemSelect.apply(self, arguments); }); autoGrow($control_input); $control.on({ @@ -207,7 +207,7 @@ $.extend(Selectize.prototype, { keypress : function() { return self.onKeyPress.apply(self, arguments); }, input : function() { return self.onInput.apply(self, arguments); }, resize : function() { self.positionDropdown.apply(self, []); }, - blur : function() { return self.onBlur.apply(self, arguments); }, + // blur : function() { return self.onBlur.apply(self, arguments); }, focus : function() { self.ignoreBlur = false; return self.onFocus.apply(self, arguments); }, paste : function() { return self.onPaste.apply(self, arguments); } }); @@ -231,7 +231,8 @@ $.extend(Selectize.prototype, { return false; } // blur on click outside - if (!self.$control.has(e.target).length && e.target !== self.$control[0]) { + // do not blur if the dropdown is clicked + if (!self.$dropdown.has(e.target).length && e.target !== self.$control[0]) { self.blur(e.target); } } @@ -648,12 +649,14 @@ $.extend(Selectize.prototype, { if (self.ignoreFocus) { return; - } else if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) { - // necessary to prevent IE closing the dropdown when the scrollbar is clicked - self.ignoreBlur = true; - self.onFocus(e); - return; } + // Bug fix do not blur dropdown here + // else if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) { + // // necessary to prevent IE closing the dropdown when the scrollbar is clicked + // self.ignoreBlur = true; + // self.onFocus(e); + // return; + // } var deactivate = function() { self.close();