W-3550658: Set focus on input and create pill from "uncommitted" text

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');
 		}
 	});
 };

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) ||

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" );
+	} );
+
 } );