Multiple fix and enhancement

src/plugins/clear_button/plugin.js

@@ -47,10 +47,10 @@ Selectize.define("clear_button", function (options) {
       }
 
       self.on("change", function () {
-        if (self.getValue() !== "" || self.getValue().length === 0) {
-          self.$wrapper.find("." + options.className).css("display", "");
-        } else {
+        if (self.getValue() === "" || self.getValue().length === 0) {
           self.$wrapper.find("." + options.className).css("display", "none");
+        } else {
+          self.$wrapper.find("." + options.className).css("display", "");
         }
       });
 

src/plugins/remove_button/plugin.js

@@ -15,61 +15,16 @@
  * @author Brian Reavis <brian@thirdroute.com>
  */
 
-Selectize.define('remove_button', function(options) {
+Selectize.define('remove_button', function (options) {
+  if (this.settings.mode === 'single') return;
+
 	options = $.extend({
 			label     : '&#xd7;',
 			title     : 'Remove',
 			className : 'remove',
 			append    : true
 		}, options);
 
-		var singleClose = function(thisRef, options) {
-
-			options.className = 'remove-single';
-
-			var self = thisRef;
-			var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
-
-			/**
-			 * Appends an element as a child (with raw HTML).
-			 *
-			 * @param {string} html_container
-			 * @param {string} html_element
-			 * @return {string}
-			 */
-			var append = function(html_container, html_element) {
-				return $('<span>').append(html_container)
-					.append(html_element);
-			};
-
-			thisRef.setup = (function() {
-				var original = self.setup;
-				return function() {
-					// override the item rendering method to add the button to each
-					if (options.append) {
-						var id = $(self.$input.context).attr('id');
-						var selectizer = $('#'+id);
-
-						var render_item = self.settings.render.item;
-						self.settings.render.item = function(data) {
-							return append(render_item.apply(thisRef, arguments), html);
-						};
-					}
-
-					original.apply(thisRef, arguments);
-
-					// add event listener
-					thisRef.$control.on('click', '.' + options.className, function(e) {
-						e.preventDefault();
-						if (self.isLocked) return;
-
-						self.clear();
-					});
-
-				};
-			})();
-		};
-
 		var multiClose = function(thisRef, options) {
 
 			var self = thisRef;
@@ -117,10 +72,5 @@ Selectize.define('remove_button', function(options) {
 			})();
 		};
 
-		if (this.settings.mode === 'single') {
-			singleClose(this, options);
-			return;
-		} else {
-			multiClose(this, options);
-		}
+    multiClose(this, options);
 });

src/plugins/remove_button/plugin.scss

@@ -35,11 +35,4 @@
       $select-lighten-disabled-item-border
     );
   }
-
-  .remove-single {
-    position: absolute;
-    right: 0;
-    top: 0;
-    font-size: 23px;
-  }
 }

src/selectize.jquery.js

@@ -12,16 +12,16 @@ $.fn.selectize = function(settings_user) {
 	/**
 	 * Initializes selectize from a <input type="text"> element.
 	 *
-	 * @param {object} $input
-	 * @param {object} settings_element
+	 * @param {JQuery} $input
+	 * @param {Object} settings_element
 	 */
 	var init_textbox = function($input, settings_element) {
 		var i, n, values, option;
 
 		var data_raw = $input.attr(attr_data);
 
 		if (!data_raw) {
-			var value = $.trim($input.val() || '');
+			var value = ($input.val() || '').trim();
 			if (!settings.allowEmptyOption && !value.length) return;
 			values = value.split(settings.delimiter);
 			for (i = 0, n = values.length; i < n; i++) {
@@ -51,11 +51,22 @@ $.fn.selectize = function(settings_user) {
 		var optionsMap = {};
 
 		var readData = function($el) {
-			var data = attr_data && $el.attr(attr_data);
+      var data = attr_data && $el.attr(attr_data);
+      var allData = $el.data();
+      var obj = {};
+
 			if (typeof data === 'string' && data.length) {
-				return JSON.parse(data);
-			}
-			return null;
+        if (isJSON(data)) {
+          Object.assign(obj, JSON.parse(data))
+        } else {
+          obj[data] = data;
+        }
+      }
+
+
+      Object.assign(obj, allData);
+
+			return obj || null;
 		};
 
 		var addOption = function($option, group) {
@@ -73,7 +84,7 @@ $.fn.selectize = function(settings_user) {
 					var arr = optionsMap[value][field_optgroup];
 					if (!arr) {
 						optionsMap[value][field_optgroup] = group;
-					} else if (!$.isArray(arr)) {
+					} else if (!Array.isArray(arr)) {
 						optionsMap[value][field_optgroup] = [arr, group];
 					} else {
 						arr.push(group);
@@ -86,7 +97,9 @@ $.fn.selectize = function(settings_user) {
 			option[field_label]    = option[field_label] || $option.text();
 			option[field_value]    = option[field_value] || value;
 			option[field_disabled] = option[field_disabled] || $option.prop('disabled');
-			option[field_optgroup] = option[field_optgroup] || group;
+      option[field_optgroup] = option[field_optgroup] || group;
+      option.styles = $option.attr('style') || '';
+			option.classes = $option.attr('class') || '';
 
 			optionsMap[value] = option;
 			options.push(option);

src/selectize.js

@@ -63,7 +63,7 @@ var Selectize = function($input, settings) {
 			self.registerOption(self.settings.options[i]);
 		}
 		delete self.settings.options;
-	}
+  }
 
 	// build optgroup table
 	if (self.settings.optgroups) {
@@ -301,7 +301,11 @@ $.extend(Selectize.prototype, {
 				return '<div class="optgroup-header">' + escape(data[field_optgroup]) + '</div>';
 			},
 			'option': function(data, escape) {
-				return '<div class="option '+( data[field_value] === '' ? 'selectize-dropdown-emptyoptionlabel' : '')+'">' + escape(data[field_label]) + '</div>';
+        var classes = data.classes ? ' ' + data.classes : '';
+        classes += data[field_value] === '' ? ' selectize-dropdown-emptyoptionlabel' : '';
+
+        var styles = data.styles ? ' style="' + data.styles +  '"': '';
+				return '<div' + styles + ' class="option' + classes + '">' + escape(data[field_label]) + '</div>';
 			},
 			'item': function(data, escape) {
 				return '<div class="item">' + escape(data[field_label]) + '</div>';
@@ -353,7 +357,7 @@ $.extend(Selectize.prototype, {
 	 * Triggered when the main control element
 	 * has a click event.
 	 *
-	 * @param {object} e
+	 * @param {PointerEvent} e
 	 * @return {boolean}
 	 */
 	onClick: function(e) {
@@ -613,7 +617,7 @@ $.extend(Selectize.prototype, {
 	/**
 	 * Triggered on <input> focus.
 	 *
-	 * @param {object} e (optional)
+	 * @param {FocusEvent} e (optional)
 	 * @returns {boolean}
 	 */
 	onFocus: function(e) {
@@ -822,7 +826,7 @@ $.extend(Selectize.prototype, {
 	/**
 	 * Resets the selected items to the given value.
 	 *
-	 * @param {mixed} value
+	 * @param {Array<String|Number>} value
 	 */
 	setValue: function(value, silent) {
 		var events = silent ? [] : ['change'];
@@ -1611,10 +1615,10 @@ $.extend(Selectize.prototype, {
 			if (inputMode === 'single') self.clear(silent);
 			if (inputMode === 'multi' && self.isFull()) return;
 
-			$item = $(self.render('item', self.options[value]));
+      $item = $(self.render('item', self.options[value]));
 			wasFull = self.isFull();
 			self.items.splice(self.caretPos, 0, value);
-			self.insertAtCaret($item);
+      self.insertAtCaret($item);
 			if (!self.isPending || (!wasFull && self.isFull())) {
 				self.refreshState();
 			}
@@ -1666,7 +1670,8 @@ $.extend(Selectize.prototype, {
 		if (i !== -1) {
 			self.trigger('item_before_remove', value, $item);
 			$item.remove();
-			if ($item.hasClass('active')) {
+      if ($item.hasClass('active')) {
+        $item.removeClass('active');
 				idx = self.$activeItems.indexOf($item[0]);
 				self.$activeItems.splice(idx, 1);
 			}
@@ -1891,8 +1896,7 @@ $.extend(Selectize.prototype, {
 		if (
       self.isLocked ||
       self.isOpen ||
-      (self.settings.mode === "multi" && self.isFull()) ||
-      self.$control_input.is(":invalid")
+      (self.settings.mode === "multi" && self.isFull())
     )
       return;
 		self.focus();
@@ -2016,7 +2020,10 @@ $.extend(Selectize.prototype, {
 	 */
 	insertAtCaret: function($el) {
 		var caret = Math.min(this.caretPos, this.items.length);
-		var el = $el[0];
+    var el = $el[0];
+    /**
+     * @type {HTMLElement}
+     **/
 		var target = this.buffer || this.$control[0];
 
 		if (caret === 0) {

src/utils.js

@@ -346,16 +346,30 @@ var domToString = function(d) {
 	return tmp.innerHTML;
 };
 
-var logError = function(message, options){
-	if(!options) options = {};
-	var component = "Selectize";
+var logError = function (message, options) {
+  if (!options) options = {};
+  var component = "Selectize";
 
-	console.error(component + ": " + message)
+  console.error(component + ": " + message)
 
-	if(options.explanation){
-		// console.group is undefined in <IE11
-		if(console.group) console.group();
-		console.error(options.explanation);
-		if(console.group) console.groupEnd();
-	}
-}
+  if (options.explanation) {
+    // console.group is undefined in <IE11
+    if (console.group) console.group();
+    console.error(options.explanation);
+    if (console.group) console.groupEnd();
+  }
+};
+
+/**
+ *
+ * @param {any} data Data to testing
+ * @returns {Boolean} true if is an JSON object
+ */
+var isJSON = function (data) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};

test/setup.js

@@ -87,10 +87,10 @@
 					optgroupValueField: 'val',
 					optgroupField: 'grp',
 					disabledField: 'dis'
-				});
+        });
 				assert.deepEqual(test.selectize.options, {
-					'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: false},
-					'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false}
+					'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: false, styles: '', classes: ''},
+					'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false, styles: '', classes: ''}
 				});
 				assert.deepEqual(test.selectize.optgroups, {
 					'Group 1': {label: 'Group 1', val: 'Group 1', $order: 3, dis: false},
@@ -111,10 +111,10 @@
 					optgroupValueField: 'val',
 					optgroupField: 'grp',
 					disabledField: 'dis'
-				});
+        });
 				assert.deepEqual(test.selectize.options, {
-					'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: true},
-					'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false}
+					'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: true, styles: '', classes: ''},
+					'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false, styles: '', classes: ''}
 				});
 				assert.deepEqual(test.selectize.optgroups, {
 					'Group 1': {label: 'Group 1', val: 'Group 1', $order: 3, dis: false},
@@ -210,7 +210,27 @@
 					expect(test.selectize.$dropdown.find('[data-selectable]')).to.has.length(1);
 					done();
 				}, 0);
-			});
+      });
+      it('should respect option style / class', function () {
+        var test;
+
+        beforeEach(function() {
+          test = setup_test('<select>' +
+            '<option value="a" style="color:red;" class="a">A</option>' +
+          '</select>', {
+            dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 }
+          });
+        });
+
+        it('should dropdown height to be equal 100', function(done) {
+          test.selectize.focus();
+
+          window.setTimeout(function () {
+            expect(test.selectize.$dropdown_content.find('.option').attr('style')).to.be.equal('color:red;');
+            expect(test.selectize.$dropdown_content.find('.option').hasClass('a')).to.be.equal(true);
+          }, 0);
+        });
+      });
 			describe('getValue()', function() {
 				it('should return "" when empty', function() {
 					var test = setup_test('<select>', {});