several fix and enhancements (#1906)

* fix: style dropdown bootstrap4/5

* fix: appareance with input-group class

* feat: add ignoreOnDropdownHeight property

* fix: calcul dropdownheight with optgroup

* fix: style for input-group class

* fix: add separator height to dropdown height calcul

* feat: add option 'search'

* test: add test for normalize/search options

* fix: different style for select/active option

* fix: persitant state style for selected item

* fix: peristant style for selected option

* fix: prevent the keyboard on mobile devices

Author: fabienwnklr

src/defaults.js

@@ -61,26 +61,27 @@ Selectize.defaults = {
   },
   normalize: false,
   ignoreOnDropwdownHeight: 'img, i',
-  /*
-  load                 : null, // function(query, callback) { ... }
-  score                : null, // function(search) { ... }
-  formatValueToKey     : null, // function(key) { ... }
-  onInitialize         : null, // function() { ... }
-  onChange             : null, // function(value) { ... }
-  onItemAdd            : null, // function(value, $item) { ... }
-  onItemRemove         : null, // function(value, $item) { ... }
-  onClear              : null, // function() { ... }
-  onOptionAdd          : null, // function(value, data) { ... }
-  onOptionRemove       : null, // function(value) { ... }
-  onOptionClear        : null, // function() { ... }
-  onOptionGroupAdd     : null, // function(id, data) { ... }
-  onOptionGroupRemove  : null, // function(id) { ... }
-  onOptionGroupClear   : null, // function() { ... }
-  onDropdownOpen       : null, // function($dropdown) { ... }
-  onDropdownClose      : null, // function($dropdown) { ... }
-  onType               : null, // function(str) { ... }
-  onDelete             : null, // function(values) { ... }
-  */
+  search: true,
+	/*
+	load                 : null, // function(query, callback) { ... }
+	score                : null, // function(search) { ... }
+	formatValueToKey     : null, // function(key) { ... }
+	onInitialize         : null, // function() { ... }
+	onChange             : null, // function(value) { ... }
+	onItemAdd            : null, // function(value, $item) { ... }
+	onItemRemove         : null, // function(value, $item) { ... }
+	onClear              : null, // function() { ... }
+	onOptionAdd          : null, // function(value, data) { ... }
+	onOptionRemove       : null, // function(value) { ... }
+	onOptionClear        : null, // function() { ... }
+	onOptionGroupAdd     : null, // function(id, data) { ... }
+	onOptionGroupRemove  : null, // function(id) { ... }
+	onOptionGroupClear   : null, // function() { ... }
+	onDropdownOpen       : null, // function($dropdown) { ... }
+	onDropdownClose      : null, // function($dropdown) { ... }
+	onType               : null, // function(str) { ... }
+	onDelete             : null, // function(values) { ... }
+	*/
 
   render: {
     /*

src/scss/selectize.scss

@@ -270,15 +270,25 @@ $select-spinner-border-color: $select-color-border;
     cursor: default;
   }
   .active {
-    background-color: $select-color-dropdown-item-active;
-    color: $select-color-dropdown-item-active-text;
+    background-color: $select-color-item-active;
+    color: $select-color-item-active-text;
     &.create {
       color: $select-color-dropdown-item-create-active-text;
     }
   }
+
+  .selected {
+    background-color: $select-color-item-active;
+    color: $select-color-item-active-text;
+  }
   .create {
     color: $select-color-dropdown-item-create-text;
   }
+
+  .active:not(.selected) {
+    background: $select-color-dropdown-item-active;
+    color: $select-color-dropdown-item-active-text;
+  }
 }
 
 .#{$selectize}-dropdown-content {
@@ -326,7 +336,7 @@ $select-spinner-border-color: $select-color-border;
     cursor: pointer;
   }
   &.input-active,
-  &.input-active input {
+  &.input-active input:not(:read-only) {
     cursor: text;
   }
 

src/selectize.js

@@ -158,6 +158,13 @@ $.extend(Selectize.prototype, {
 			$control_input.attr('placeholder', settings.placeholder);
 		}
 
+    // to have an identical rendering to a simple select (usefull for mobile device and do not open keyboard)
+    if (!self.settings.search) {
+      $control_input.attr('readonly', true);
+	  $control_input.attr('inputmode', 'none');
+      $control.css('cursor', 'pointer');
+    }
+
 		// if splitOn was not passed in, construct it from the delimiter to allow pasting universally
 		if (!self.settings.splitOn && self.settings.delimiter) {
 			var delimiterEscaped = self.settings.delimiter.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

test/api.js

@@ -632,6 +632,23 @@
 					});
 					test.selectize.search('hello');
 				}).to.not.throw(Error);
+      });
+      it('should normalize a string', function () {
+        var test;
+
+        beforeEach(function() {
+          test = setup_test('<select>' +
+            '<option value="a">A</option>' +
+          '</select>', { normalize: true });
+        });
+
+        it('should return query satinized', function() {
+          var query = test.selectize.search('héllo').query;
+
+          window.setTimeout(function () {
+            expect(query).to.be.equal('hello');
+          }, 0);
+        });
 			});
 		});
 

test/setup.js

@@ -217,12 +217,10 @@
         beforeEach(function() {
           test = setup_test('<select>' +
             '<option value="a" style="color:red;" class="a">A</option>' +
-          '</select>', {
-            dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 }
-          });
+          '</select>');
         });
 
-        it('should dropdown height to be equal 100', function(done) {
+        it('should dropdown height to be equal 100', function() {
           test.selectize.focus();
 
           window.setTimeout(function () {
@@ -231,6 +229,24 @@
           }, 0);
         });
       });
+
+      it('should respect input readonly (option search = false)', function () {
+        var test;
+
+        beforeEach(function() {
+          test = setup_test('<select>' +
+            '<option value="a">A</option>' +
+          '</select>', { search: false });
+        });
+
+        it('should readonly on input and cursor pointer on input and control element', function () {
+          window.setTimeout(function () {
+            expect(test.selectize.$dropdown_input.attr('readonly')).to.be.equal('readonly');
+            expect(test.selectize.$dropdown_input.css('cursor')).to.be.equal('pointer');
+            expect(test.selectize.$control.css('cursor')).to.be.equal('pointer');
+          }, 0);
+        });
+      });
 			describe('getValue()', function() {
 				it('should return "" when empty', function() {
 					var test = setup_test('<select>', {});
@@ -470,7 +486,6 @@
 				}, 0);
 			});
 		});
-
 	});
 
 })();