Added closeAfterSelect setting (closes #344).

selectize · Jan 30, 2015 · f9902c2 · f9902c2
1 parent f158a7d
commit f9902c2
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/docs/usage.md b/docs/usage.md
@@ -91,6 +91,12 @@ $(function() {
 		<td valign="top"><code>boolean</code></td>
 		<td valign="top"><code>false</code></td>
 	</tr>
+    <tr>
+        <td valign="top"><code>closeAfterSelect</code></td>
+        <td valign="top">If true, the dropdown will be closed after a selection is made.</td>
+        <td valign="top"><code>boolean</code></td>
+        <td valign="top"><code>false</code></td>
+    </tr>
 	<tr>
 		<td valign="top"><code>allowEmptyOption</code></td>
 		<td valign="top">If true, Selectize will treat any options with a "" value like normal. This defaults to false to accomodate the common &lt;select&gt; practice of having the first empty option act as a placeholder.</td>

diff --git a/src/defaults.js b/src/defaults.js
@@ -20,6 +20,7 @@ Selectize.defaults = {
 	selectOnTab: false,
 	preload: false,
 	allowEmptyOption: false,
+	closeAfterSelect: false,
 
 	scrollDuration: 60,
 	loadThrottle: 300,

diff --git a/src/selectize.js b/src/selectize.js
@@ -666,14 +666,20 @@ $.extend(Selectize.prototype, {
 
 		$target = $(e.currentTarget);
 		if ($target.hasClass('create')) {
-			self.createItem();
+			self.createItem(null, function() {
+				if (self.settings.closeAfterSelect) {
+					self.close();
+				}
+			});
 		} else {
 			value = $target.attr('data-value');
 			if (typeof value !== 'undefined') {
 				self.lastQuery = null;
 				self.setTextboxValue('');
 				self.addItem(value);
-				if (!self.settings.hideSelected && e.type && /mouse/.test(e.type)) {
+				if (self.settings.closeAfterSelect) {
+					self.close();
+				} else if (!self.settings.hideSelected && e.type && /mouse/.test(e.type)) {
 					self.setActiveOption(self.getOption(value));
 				}
 			}

diff --git a/test/interaction.js b/test/interaction.js
@@ -12,6 +12,36 @@
 
 	describe('Interaction', function() {
 
+		it('should keep dropdown open after selection made if closeAfterSelect: false', function(done) {
+			var test = setup_test('<select multiple>' +
+					'<option value="a">A</option>' +
+					'<option value="b">B</option>' +
+				'</select>', {});
+
+				click(test.selectize.$control, function() {
+					click($('[data-value=a]', test.selectize.$dropdown_content), function() {
+						expect(test.selectize.isOpen).to.be.equal(true);
+						expect(test.selectize.isFocused).to.be.equal(true);
+						done();
+					});
+				});
+		});
+
+		it('should close dropdown after selection made if closeAfterSelect: true', function(done) {
+			var test = setup_test('<select multiple>' +
+					'<option value="a">A</option>' +
+					'<option value="b">B</option>' +
+				'</select>', {closeAfterSelect: true});
+
+				click(test.selectize.$control, function() {
+					click($('[data-value=a]', test.selectize.$dropdown_content), function() {
+						expect(test.selectize.isOpen).to.be.equal(false);
+						expect(test.selectize.isFocused).to.be.equal(true);
+						done();
+					});
+				});
+		});
+
 		describe('clicking control', function() {
 
 			it('should give it focus', function(done) {