4 files changed, 34 insertions, 15 deletions
diff --git a/web-ui/app/js/mail_view/ui/recipients/recipient.js b/web-ui/app/js/mail_view/ui/recipients/recipient.js
index 2985a9ab..66577f51 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipient.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipient.js
@@ -89,18 +89,18 @@ define(
         }.bind(this));
       };
 
-      this.editRecipient = function(evt) {
-        var mailAddr = this.$node.find('input[type=hidden]').val();
-        // TODO: refactor the code bellow
-        $('#recipients-to-area').find('input.tt-input').val(mailAddr);
-        $('#recipients-to-area').find('input.tt-input').focus();
-        this.destroy();
-        // TODO: fix the bug when edit recipient and click out of the input
+      this.getMailAddress = function() {
+        return this.$node.find('input[type=hidden]').val();
       };
 
+      this.triggerEditRecipient = function(event, element) {
+        this.trigger(this.$node.closest('.recipients-area'), events.ui.recipients.clickToEdit, this);
+      }
+
       this.after('initialize', function () {
         this.recipientDelActions();
-        this.on('click', this.editRecipient);
+        this.on('click', this.triggerEditRecipient);
+        
         if (this.attr.invalidAddress){
             this.sinalizeInvalid();
         } else {
diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients.js b/web-ui/app/js/mail_view/ui/recipients/recipients.js
index 7072c09e..3dfd6661 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients.js
@@ -46,11 +46,31 @@ define(
         this.addressesUpdated();
       }
 
-      function editCurrentRecipient() {
-        this.attr.iterator.editCurrent();
+      function editCurrentRecipient(event, recipient) {
+        var mailAddr = this.attr.iterator.current().getMailAddress();
+        this.attr.iterator.deleteCurrent();
+        this.attr.input.$node.val(mailAddr).focus();
+        this.unselectAllRecipients();
         this.addressesUpdated();
       }
 
+      this.clickToEditRecipient = function(event, recipient) {
+        this.attr.iterator = null;
+        var mailAddr = recipient.getMailAddress();
+
+        var position = recipient.$node.closest('.recipients-area').find('.fixed-recipient').index(recipient.$node);
+        this.attr.recipients.splice(position, 1);
+        recipient.destroy();
+
+        this.addressesUpdated();
+        this.unselectAllRecipients();
+        this.attr.input.$node.val(mailAddr).focus();
+      };
+
+      this.unselectAllRecipients = function() {
+        this.$node.find('.recipient-value.selected').removeClass('selected');
+      }
+
       var SPECIAL_KEYS_ACTIONS = {
         8: deleteCurrentRecipient,
         46: deleteCurrentRecipient,
@@ -156,6 +176,7 @@ define(
         this.on(events.ui.recipients.selectLast, this.selectLastRecipient);
         this.on(events.ui.recipients.entered, this.recipientEntered);
         this.on(events.ui.recipients.enteredInvalid, this.invalidRecipientEntered);
+        this.on(events.ui.recipients.clickToEdit, this.clickToEditRecipient);
 
         this.on(document, events.ui.recipients.doCompleteInput, this.doCompleteRecipients);
 
diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients_iterator.js b/web-ui/app/js/mail_view/ui/recipients/recipients_iterator.js
index 35741bb7..6c52c52e 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients_iterator.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients_iterator.js
@@ -54,10 +54,6 @@ define(['helpers/iterator'], function (Iterator) {
         this.input.focus();
       }
     };
-
-    this.editCurrent = function() {
-      this.iterator.removeCurrent().editRecipient();
-    };
   }
 
 });
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index df062495..f82a6b36 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -83,6 +83,7 @@ define(function () {
         entered: 'ui:recipients:entered',
         enteredInvalid: 'ui:recipients:enteredInvalid',
         updated: 'ui:recipients:updated',
+        editRecipient: 'ui:recipients:editRecipient',
         deleteRecipient: 'ui:recipients:deleteRecipient',
         deleteLast: 'ui:recipients:deleteLast',
         selectLast: 'ui:recipients:selectLast',
@@ -91,7 +92,8 @@ define(function () {
         inputFieldHasCharacters: 'ui:recipients:inputFieldHasCharacters',
         inputFieldIsEmpty: 'ui:recipients:inputFieldIsEmpty',
         doCompleteInput: 'ui:recipients:doCompleteInput',
-        doCompleteRecipients: 'ui:recipients:doCompleteRecipients'
+        doCompleteRecipients: 'ui:recipients:doCompleteRecipients',
+        clickToEdit: 'ui:recipients:clickToEdit'
       }
     },
     search: {