diff --git a/docs/usage.md b/docs/usage.md index ae8c1d5b0..c763affdc 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -91,6 +91,12 @@ $(function() { boolean false + + closeAfterSelect + If true, the dropdown will be closed after a selection is made. + boolean + false + allowEmptyOption If true, Selectize will treat any options with a "" value like normal. This defaults to false to accomodate the common <select> practice of having the first empty option act as a placeholder. diff --git a/src/defaults.js b/src/defaults.js index f6d616af1..04556cde3 100644 --- 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 index 20f3b88e7..d9df9bca6 100644 --- 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 index 319845781..fe9ccca27 100644 --- 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('', {}); + + 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('', {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) {