Revert "(js) Drop sgTransformOnBlur directive"

This reverts commit 67258fe337.

Fixes #3815

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -57,7 +57,7 @@
               <md-chips ng-model="editor.message.editable.to"
                         md-separator-keys="editor.recipientSeparatorKeys"
                         md-transform-chip="editor.addRecipient($chip, 'to')"
-                        md-add-on-blur="true">
+                        sg-transform-on-blur="sg-transform-on-blur">
                 <md-autocomplete
                     class="sg-chips-autocomplete"
                     md-autofocus="true"
@@ -91,7 +91,7 @@
               <md-chips ng-model="editor.message.editable.cc"
                         md-separator-keys="editor.recipientSeparatorKeys"
                         md-transform-chip="editor.addRecipient($chip, 'cc')"
-                        md-add-on-blur="true">
+                        sg-transform-on-blur="sg-transform-on-blur">
                 <md-autocomplete
                     class="sg-chips-autocomplete"
                     md-search-text="editor.autocomplete.cc.searchText"
@@ -124,7 +124,7 @@
               <md-chips ng-model="editor.message.editable.bcc"
                         md-separator-keys="editor.recipientSeparatorKeys"
                         md-transform-chip="editor.addRecipient($chip, 'bcc')"
-                        md-add-on-blur="true">
+                        sg-transform-on-blur="sg-transform-on-blur">
                 <md-autocomplete
                     class="sg-chips-autocomplete"
                     md-selected-item="editor.autocomplete.bcc.selected"

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -251,7 +251,7 @@
         <md-chips class="md-flex"
                   ng-model="app.search.params"
                   md-transform-chip="app.newSearchParam($chip)"
-                  md-add-on-blur="true">
+                  sg-transform-on-blur="sg-transform-on-blur">
           <input sg-focus-on="advancedSearch" type="text"
                  ng-disabled="app.currentSearchParam.length == 0"
                  sg-placeholder="app.search.options[app.currentSearchParam]"/>

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

@@ -0,0 +1,71 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  /* jshint loopfunc: true */
+  '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>
+   */
+  sgTransformOnBlur.$inject = ['$window', '$timeout'];
+  function sgTransformOnBlur($window, $timeout) {
+    return {
+      link: link,
+      require: 'mdChips', // Extends the original mdChips directive
+      restrict: 'A'
+    };
+
+    function link(scope, element, attributes, mdChipsCtrl) {
+      var mouseUpActions = [];
+
+      mdChipsCtrl.onInputBlur = function() {
+        var appendFcn;
+
+        this.inputHasFocus = false;
+        appendFcn = (function() {
+          var chipBuffer = this.getChipBuffer();
+          if ((this.hasAutocomplete && this.requireMatch) || !chipBuffer || chipBuffer === "") return;
+          this.appendChip(chipBuffer);
+          this.resetChipBuffer();
+        }).bind(this);
+
+        if (this.hasAutocomplete) {
+          mouseUpActions.push(appendFcn);
+          $window.addEventListener('click', function(event){
+            while (mouseUpActions.length > 0) {
+              // Trigger actions after some delay to give time to md-autocomple to clear the input field
+              var action = mouseUpActions.splice(0,1)[0];
+              $timeout(function(){
+                $timeout(action);
+              });
+            }
+          }, false);
+        }
+        else
+          appendFcn();
+      };
+    }
+  }
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgTransformOnBlur', sgTransformOnBlur);
+})();