Issue selectize#1689, change selectize behavior to work inside modals.

vanboom · Jun 6, 2022 · e579212 · e579212
1 parent a1e8636
commit e579212
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/src/selectize.js b/src/selectize.js
@@ -135,7 +135,7 @@ $.extend(Selectize.prototype, {
 
 		$wrapper          = $('<div>').addClass(settings.wrapperClass).addClass(classes).addClass(inputMode);
 		$control          = $('<div>').addClass(settings.inputClass).addClass('items').appendTo($wrapper);
-		$control_input    = $('<input type="text" autocomplete="new-password" autofill="no" />').appendTo($control).attr('tabindex', $input.is(':disabled') ? '-1' : self.tabIndex);
+		$control_input    = $('<input type="select-one" autocomplete="new-password" autofill="no" />').appendTo($control).attr('tabindex', $input.is(':disabled') ? '-1' : self.tabIndex);
 		$dropdown_parent  = $(settings.dropdownParent || $wrapper);
 		$dropdown         = $('<div>').addClass(settings.dropdownClass).addClass(inputMode).hide().appendTo($dropdown_parent);
 		$dropdown_content = $('<div>').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();