Issue #78 - Tokenize emails on blur

2 files changed, 25 insertions, 5 deletions

diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
index e39ebf6a..a74e871e 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js
@@ -102,10 +102,8 @@ define([
         }
 
         if (isEnterAddressKey(keyPressed)) {
-          if (!_.isEmpty(this.$node.val())) {
-            this.recipientSelected(null, { value: this.$node.val() });
-            event.preventDefault();
-          }
+          this.tokenizeRecipient(event);
+
           if((keyPressed !== 9 /* tab */)) {
             event.preventDefault();
           }
@@ -113,6 +111,15 @@ define([
 
       };
 
+	this.tokenizeRecipient = function (event) {
+	    if (_.isEmpty(this.$node.val())) {
+		  return;
+	    }
+
+	    this.recipientSelected(null, {value: this.$node.val() });
+	    event.preventDefault();
+	}
+
       this.recipientSelected = function (event, data) {
         var value = (data && data.value) || this.$node.val();
 
@@ -141,11 +148,11 @@ define([
         this.trigger(document, toTrigger, { name: this.attr.name });
       };
 
-
       this.after('initialize', function () {
         self = this;
         this.init();
         this.on('typeahead:selected typeahead:autocompleted', this.recipientSelected);
+        this.on(this.$node, 'blur', this.tokenizeRecipient);
         this.on(this.$node, 'keydown', this.processSpecialKey);
         this.on(this.$node, 'keyup', this.warnSendButtonOfInputState);
 
diff --git a/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
index 499065c2..6b486fa9 100644
--- a/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
+++ b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js
@@ -99,4 +99,17 @@ describeComponent('mail_view/ui/recipients/recipients_input',function () {
     });
   });
 
+  describe('on blur', function() {
+    it('tokenizes recipient email if there is an input val', function() {
+      var addressEnteredEvent = spyOnEvent(this.$node, Pixelated.events.ui.recipients.entered);
+      var blurEvent = $.Event('blur'); 
+	spyOn(blurEvent, 'preventDefault');
+
+	this.$node.val('a@b.c');
+	this.$node.trigger(blurEvent);
+
+	expect(blurEvent.preventDefault).toHaveBeenCalled();
+	expect(addressEnteredEvent).toHaveBeenTriggeredOnAndWith(this, {name: 'to', address: 'a@b.c'});
+    })
+  });
 });