Fixes to remove button plugin

examples/plugins.html

@@ -31,6 +31,10 @@ <h2>Plugin: "remove_button"</h2>
 					<label for="input-tags2">Tags:</label>
 					<input type="text" disabled id="input-tags2" class="input-tags demo-default" value="awesome,neat">
 				</div>
+				<div class="control-group">
+					<label for="input-tags">Tags:</label>
+					<input type="text" id="input-tags3" class="input-tags2 demo-default" value="awesome">
+				</div>
 				<script>
 				$('.input-tags').selectize({
 					plugins: ['remove_button'],
@@ -45,6 +49,14 @@ <h2>Plugin: "remove_button"</h2>
 						return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
 					}
 				});
+
+				// single selection
+				$('.input-tags2').selectize({
+					plugins: ['remove_button'],
+					persist: true,
+					create: true,
+					maxItems: 1
+				});
 				</script>
 			</div>
 

src/plugins/remove_button/plugin.js

@@ -16,109 +16,61 @@
 
 Selectize.define('remove_button', function(options) {
 	options = $.extend({
-			label     : '×',
-			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();
-					});
-
+		label     : '&times;',
+		title     : 'Remove',
+		className : this.settings.mode === 'single' ? 'remove-single' : 'remove',
+		append    : true
+	}, options);
+
+	var self = this;
+	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) {
+		var pos = html_container.search(/(<\/[^>]+>\s*)$/);
+		return html_container.substring(0, pos) + html_element + html_container.substring(pos);
+	};
+
+	self.setup = (function() {
+		var original = self.setup;
+		return function() {
+			// override the item rendering method to add the button to each
+			if (options.append) {
+				var render_item = self.settings.render.item;
+				self.settings.render.item = function(data) {
+					return append(render_item.apply(self, arguments), html);
 				};
-			})();
-		};
-
-		var multiClose = function(thisRef, options) {
-
-			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) {
-				var pos = html_container.search(/(<\/[^>]+>\s*)$/);
-				return html_container.substring(0, pos) + html_element + html_container.substring(pos);
-			};
-
-			thisRef.setup = (function() {
-				var original = self.setup;
-				return function() {
-					// override the item rendering method to add the button to each
-					if (options.append) {
-						var render_item = self.settings.render.item;
-						self.settings.render.item = function(data) {
-							return append(render_item.apply(thisRef, arguments), html);
-						};
-					}
+			}
+
+			original.apply(self, arguments);
+
+			// add event listener
+			self.$control.on('click', '.' + options.className, function(e) {
+				e.preventDefault();
+				if (self.isLocked) return;
+
+				// use deleteSelection()
+				// clear() will not trigger the 'item_remove' event
+				// removeItem() will not trigger the 'onDelete' callback
+				var $item = $(e.currentTarget).parent();
+
+				if (self.settings.mode === 'single') {
+					self.setCaret(); // 1 for 'single'
+					e['keyCode'] = KEY_BACKSPACE; // makes deleteSelection calculate the correct direction
+				} else {
+					self.setActiveItem($item);
+				}
+				if (self.deleteSelection(e)) {
+					self.setCaret(self.items.length);
+				}
+			});
 
-					original.apply(thisRef, arguments);
-
-					// add event listener
-					thisRef.$control.on('click', '.' + options.className, function(e) {
-						e.preventDefault();
-						if (self.isLocked) return;
-
-						var $item = $(e.currentTarget).parent();
-						self.setActiveItem($item);
-						if (self.deleteSelection()) {
-							self.setCaret(self.items.length);
-						}
-					});
-
-				};
-			})();
 		};
-
-		if (this.settings.mode === 'single') {
-			singleClose(this, options);
-			return;
-		} else {
-			multiClose(this, options);
-		}
+	})();
 });

src/plugins/remove_button/plugin.less

@@ -34,10 +34,22 @@
 	.disabled [data-value] .remove {
 		border-left-color: lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
 	}
-	.remove-single {
+	[data-value] .remove-single {
 		position: absolute;
-		right: 0;
-		top: 0;
-		font-size: 23px;
+		right: @selectize-padding-x - 2px;
+		top: -1px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: @selectize-line-height;
+		color: lighten(@selectize-arrow-color, 30%);
+		text-shadow: 0 1px 0 rgba(0,0,0,0.1);
+		&:hover:not(:active) {
+			color: transparent;
+			text-shadow: 0 0 1px @selectize-arrow-color;
+		}
+		&:hover:active {
+			text-shadow: none;
+		}
 	}
 }