diff --git a/grunt/tasks/test.js b/grunt/tasks/test.js index 8e23ab146..4791da9ab 100644 --- a/grunt/tasks/test.js +++ b/grunt/tasks/test.js @@ -1,7 +1,7 @@ module.exports = function test (grunt) { // to be run prior to submitting a PR grunt.registerTask('test', 'run jshint, qunit source w/ coverage, and validate HTML', - ['jshint', 'connect:testServer', 'qunit:noMoment', 'qunit:globals', 'qunit:dist', 'htmllint']); + ['browserify:commonjs', 'dist', 'jshint', 'connect:testServer', 'qunit:noMoment', 'qunit:globals', 'qunit:dist', 'htmllint', 'resetdist']); // If qunit:source is working but qunit:full is breaking, check to see if the dist broke the code. This would be especially useful if we start mangling our code, but, is 99.99% unlikely right now grunt.registerTask('validate-dist', 'run qunit:source, dist, and then qunit:full', @@ -18,15 +18,15 @@ module.exports = function test (grunt) { ['connect:testServer', 'jshint', 'saucelabs-qunit:defaultBrowsers']); grunt.registerTask('travisci', 'Tests to run when in Travis CI environment', - ['browserify:commonjs', 'dist', 'test', 'qunit:dist']); + ['browserify:commonjs', 'test', 'dist', 'qunit:dist']); // if you've already accidentally added your files for commit, this will at least unstage them. If you haven't, this will wipe them out. grunt.registerTask('resetdist', 'resets changes to dist to keep them from being checked in', function resetdist () { // default resetdist to true... basically. if (typeof grunt.option('resetdist') === 'undefined' || grunt.option('resetdist')) { - var exec = require('child_process').exec; - exec('git reset HEAD dist/*'); - exec('git checkout -- dist/*'); + var exec = require('child_process').execSync; + exec('git reset HEAD dist'); + exec('git checkout -- dist'); } }); }; diff --git a/js/pillbox.js b/js/pillbox.js index 9b99e0204..0742765c1 100644 --- a/js/pillbox.js +++ b/js/pillbox.js @@ -90,6 +90,7 @@ this.$element.addClass('pills-editable'); this.$element.on('blur.fu.pillbox', '.pillbox-add-item', $.proxy(this.cancelEdit, this)); } + this.$element.on('blur.fu.pillbox', '.pillbox-add-item', $.proxy(this.inputEvent, this)); }; Pillbox.prototype = { @@ -355,10 +356,13 @@ inputEvent: function inputEvent (e) { var self = this; var text = self.options.cleanInput(this.$addItem.val()); - + var isFocusOutEvent = e.type === 'focusout'; + var blurredAfterInput = (isFocusOutEvent && text.length > 0); // If we test for keycode only, it will match for `<` & `,` instead of just `,` // This way users can type `<3` and `1 < 3`, etc... - if (this.acceptKeyCodes[e.keyCode] && !isShiftHeld(e)) { + var acceptKeyPressed = (this.acceptKeyCodes[e.keyCode] && !isShiftHeld(e)); + + if (acceptKeyPressed || blurredAfterInput) { var attr; var value; @@ -375,7 +379,7 @@ // ignore comma and make sure text that has been entered (protects against " ,". https://github.com/ExactTarget/fuelux/issues/593), unless allowEmptyPills is true. if (text.replace(/[ ]*\,[ ]*/, '').match(/\S/) || (this.options.allowEmptyPills && text.length)) { this._closeSuggestions(); - this.$addItem.hide(); + this.$addItem.hide().val(''); if (attr) { this.addItems({ @@ -391,9 +395,9 @@ } setTimeout(function clearAddItemInput () { - self.$addItem.show().val('').attr({ + self.$addItem.show().attr({ size: 10 - }); + }).focus(); }, 0); } @@ -431,7 +435,7 @@ this.$pillGroup.find('.pill').removeClass('pillbox-highlight'); - if (this.options.onKeyDown) { + if (this.options.onKeyDown && !isFocusOutEvent) { if ( isTabKey(e) || isUpArrow(e) || diff --git a/test/pillbox-test.js b/test/pillbox-test.js index 069415541..2c3976429 100644 --- a/test/pillbox-test.js +++ b/test/pillbox-test.js @@ -602,5 +602,20 @@ define( function ( require ) { assert.equal( $el.parent().length, false, "control has been removed from DOM" ); } ); + QUnit.test( "should add a pill on blur event if input is not empty", function( assert ) { + var $pillbox = $( html ).find( "#MyPillboxEmpty" ).pillbox(); + var $input = $pillbox.find( ".pillbox-add-item" ); + + assert.equal( $pillbox.pillbox( "itemCount" ), 0, "pillbox is empty to start" ); + + $input.val(''); + $input.blur(); + assert.equal( $pillbox.pillbox( "itemCount" ), 0, "pillbox remains empty" ); + + $input.val('testing'); + $input.blur(); + assert.equal( $pillbox.pillbox( "itemCount" ), 1, "pillbox has one item" ); + } ); + } );