Several fix for consolidation

examples/js/index.js

@@ -7,6 +7,8 @@ $(function() {
 	var themes = ['default','legacy','bootstrap2','bootstrap3','bootstrap4','bootstrap5'];
 	$('head').append('<link rel="stylesheet" href="../dist/css/selectize.' + theme + '.css">');
 
+  if (theme === 'bootstrap5') $('head').append('<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">');
+
 	var $themes = $('<div>').addClass('theme-selector').insertAfter('h1');
 	for (var i = 0; i < themes.length; i++) {
 		$themes.append('<a href="?theme=' + themes[i] + '"' + (themes[i] === theme ? ' class="active"' : '') + '>' + themes[i] + '</a>');

examples/plugins.html

@@ -61,7 +61,7 @@ <h2>Plugin: "remove_button"</h2>
 					create: true,
 					render: {
 						item: function(data, escape) {
-							return '<div>"' + escape(data.text) + '"</div>';
+							return '<div class="item">"' + escape(data.text) + '"</div>';
 						}
 					},
 					onDelete: function(values) {

src/plugins/clear_button/plugin.less

@@ -1,5 +1,6 @@
 .selectize-control.plugin-clear_button {
   .clear {
+      text-decoration: none;
       display: flex;
       position: absolute;
       height: 100%;

src/plugins/clear_button/plugin.scss

@@ -1,5 +1,6 @@
 .#{$selectize}-control.plugin-clear_button {
     .clear {
+        text-decoration: none;
         display: flex;
         position: absolute;
         height: 100%;
@@ -24,5 +25,5 @@
     &.single .clear {
         right: calc(#{$select-padding-x} - #{$select-padding-item-x} + 1.5rem);
     }
-    
-}
+
+}

src/plugins/dropdown_header/plugin.js

@@ -42,7 +42,10 @@ Selectize.define('dropdown_header', function(options) {
 		return function() {
 			original.apply(self, arguments);
 			self.$dropdown_header = $(options.html(options));
-			self.$dropdown.prepend(self.$dropdown_header);
+      self.$dropdown.prepend(self.$dropdown_header);
+      self.$dropdown_header.find('.' + options.closeClass).on('click', function () {
+        self.close();
+      });
 		};
 	})();
 

src/plugins/dropdown_header/plugin.less

@@ -14,7 +14,8 @@
 	margin-top: -12px;
 	line-height: 20px;
 	font-size: 20px !important;
+  text-decoration: none;
 }
 .selectize-dropdown-header-close:hover {
 	color: darken(@selectize-color-text, 25%);
-}
+}

src/plugins/dropdown_header/plugin.scss

@@ -1,4 +1,4 @@
-.#{$selectize}-control {
+.#{$selectize}-dropdown.plugin-dropdown_header {
   .#{$selectize}-dropdown-header {
     position: relative;
     padding: ($select-padding-dropdown-item-y * 2)
@@ -16,6 +16,7 @@
     margin-top: -12px;
     line-height: 20px;
     font-size: 20px !important;
+    text-decoration: none;
   }
   .#{$selectize}-dropdown-header-close:hover {
     color: darken($select-color-text, 25%);

src/scss/selectize.bootstrap5.scss

@@ -137,7 +137,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 
 .#{$selectize}-control {
   &.form-control-sm {
-    .#{$selectize}-input.has-items {
+    .#{$selectize}-input {
       min-height: $input-height-sm !important;
       height: $input-height-sm;
       padding: $input-padding-y-sm $input-padding-x-sm !important;
@@ -147,7 +147,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
   }
 
   &.multi {
-    .#{$selectize}-input.has-items {
+    .#{$selectize}-input {
       height: auto;
       padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
       padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});

src/selectize.js

@@ -1199,7 +1199,11 @@ $.extend(Selectize.prototype, {
 			for (i = 0, n = self.items.length; i < n; i++) {
 				self.getOption(self.items[i]).addClass('selected');
 			}
-		}
+    }
+
+    if (self.settings.dropdownSize.sizeType !== 'auto' && self.isOpen) {
+      self.setupDropdownHeight();
+    }
 
 		// add create option
 		has_create_option = self.canCreate(query);
@@ -1952,18 +1956,30 @@ $.extend(Selectize.prototype, {
       var height = this.settings.dropdownSize.sizeValue;
 
       if (this.settings.dropdownSize.sizeType === 'numberItems') {
-        var $items = this.$dropdown_content.children();
+        // retrieve all items (included optgroup but exept the container .optgroup)
+        var $items = this.$dropdown_content.find('*').not('.optgroup, .highlight');
         var totalHeight = 0;
 
-        $items.each(function (i, $item) {
-          if (i === height) return false;
 
-          totalHeight += $($item).outerHeight(true);
-        });
+        for (var i = 0; i < height; i++) {
+          var $item = $($items[i]);
+
+          if ($item.length === 0) break;
+
+          totalHeight += $($items[i]).outerHeight(true);
+          // If not selectable, it's an optgroup so we "ignore" for count items
+          if (typeof $item.data('selectable') == 'undefined') height++;
+
+        }
+
+        // Get padding top for add to global height
+        var paddingTop = this.$dropdown_content.css('padding-top') ? Number(this.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1')) : 0;
+        var paddingBottom = this.$dropdown_content.css('padding-bottom') ? Number(this.$dropdown_content.css('padding-bottom').replace(/\W*(\w)\w*/g, '$1')) : 0;
 
-        // Get padding top for subtract to global height to avoid seeing the next item
-        var padding = this.$dropdown_content.css('padding-top') ? this.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1') : 0;
-        height = (totalHeight - padding) + 'px';
+        height = (totalHeight + paddingTop + paddingBottom) + 'px';
+      } else if (this.settings.dropdownSize.sizeType !== 'fixedHeight') {
+        console.warn('Selectize.js - Value of "sizeType" must be "fixedHeight" or "numberItems');
+        return;
       }
 
       this.$dropdown_content.css({ height: height, maxHeight: 'none' });