(js) Directive to create chip on blur

Fixes #3470

NEWS

@@ -57,6 +57,7 @@ Bug fixes
  - [web] fixed sender addresses of draft when using multiple IMAP accounts (#3577)
  - [web] create a new message when clicking on a "mailto" link (#3588)
  - [web] fixed handling of Web calendars option "reload on login"
+ - [web] add recipient chip when leaving an input field (to/cc/bcc) (#3470)
  - [dav] we now handle the default classifications for tasks (#3541)
  - [eas] properly unfold long mail headers (#3152)
  - [eas] correctly set EAS message class for S/MIME messages (#3576)

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -55,7 +55,8 @@
             </label>
             <md-chips ng-model="editor.message.editable.to"
                       md-separator-keys="editor.recipientSeparatorKeys"
-                      md-transform-chip="editor.addRecipient($chip, 'to')">
+                      md-transform-chip="editor.addRecipient($chip, 'to')"
+                      sg-transform-on-blur="sg-transform-on-blur">
               <md-autocomplete
                   class="sg-chips-autocomplete"
                   md-autofocus="true"
@@ -88,7 +89,8 @@
             </label>
             <md-chips ng-model="editor.message.editable.cc"
                       md-separator-keys="editor.recipientSeparatorKeys"
-                      md-transform-chip="editor.addRecipient($chip, 'cc')">
+                      md-transform-chip="editor.addRecipient($chip, 'cc')"
+                      sg-transform-on-blur="sg-transform-on-blur">
               <md-autocomplete
                   class="sg-chips-autocomplete"
                   md-search-text="editor.autocomplete.cc.searchText"
@@ -120,7 +122,8 @@
             </label>
             <md-chips ng-model="editor.message.editable.bcc"
                       md-separator-keys="editor.recipientSeparatorKeys"
-                      md-transform-chip="editor.addRecipient($chip, 'bcc')">
+                      md-transform-chip="editor.addRecipient($chip, 'bcc')"
+                      sg-transform-on-blur="sg-transform-on-blur">
               <md-autocomplete
                   class="sg-chips-autocomplete"
                   md-selected-item="editor.autocomplete.bcc.selected"

UI/WebServerResources/js/Common/sgTransformOnBlur.directive.js

@@ -0,0 +1,51 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * sgTransformOnBlur - A directive to extend md-chips so the text of the input
+   * field is converted to a chip when the field is loosing focus.
+   *
+   * See issue on github:
+   *
+   *   https://github.com/angular/material/issues/3364
+   *
+   * Code is extracted from "MdChipsCtrl.prototype.onInputBlur" in controller:
+   *
+   *   angular-material/src/components/chips/js/chipsController.js
+   *
+   * @memberof SOGo.Common
+   * @ngInject
+   * @example:
+
+   <md-chips ng-model="editor.message.editable.to"
+             md-separator-keys="editor.recipientSeparatorKeys"
+             md-transform-chip="editor.addRecipient($chip, 'to')"
+             sg-transform-on-blur>
+   */
+  function sgTransformOnBlur() {
+    return {
+      link: link,
+      require: 'mdChips', // Extends the original mdChips directive
+      restrict: 'A'
+    };
+
+    function link(scope, element, attributes, mdChipsCtrl) {
+      mdChipsCtrl.onInputBlur = function() {
+        this.inputHasFocus = false;
+
+        // ADDED CODE
+        var chipBuffer = this.getChipBuffer();
+        if ((this.hasAutocomplete && this.requireMatch) || !chipBuffer || chipBuffer === "") return;
+        this.appendChip(chipBuffer);
+        this.resetChipBuffer();
+        // - EOF - ADDED CODE
+      };
+    }
+  }
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgTransformOnBlur', sgTransformOnBlur);
+})();