From 73dc86a6ed4a5febe640667bd8cc1f6ff4de7110 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 20 Jan 2020 14:10:57 -0500
Subject: [PATCH] fix(mail(js)): bypass autogrow feature of md-input to fix
 scroll jumping

See https://github.com/angular/material/issues/3070
---
 UI/Templates/MailerUI/UIxMailEditor.wox       |  2 +
 .../js/Common/sgAutogrow.directive.js         | 51 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 UI/WebServerResources/js/Common/sgAutogrow.directive.js

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 52b96631e..2b2d71f39 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -273,6 +273,8 @@
                     ng-focus="editor.onTextFocus($event)"
                     md-autofocus="::!editor.isNew()"
                     md-no-resize="md-no-resize"
+                    md-no-autogrow="md-no-autogrow"
+                    sg-autogrow="sg-autogrow"
                     md-detect-hidden="md-detect-hidden" />
         </md-input-container>
       </md-dialog-content>
diff --git a/UI/WebServerResources/js/Common/sgAutogrow.directive.js b/UI/WebServerResources/js/Common/sgAutogrow.directive.js
new file mode 100644
index 000000000..aade88d89
--- /dev/null
+++ b/UI/WebServerResources/js/Common/sgAutogrow.directive.js
@@ -0,0 +1,51 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * sgAutogrow - A directive to automatically grow a textarea depending on its content.
+   *   This directive is an alternative to the autogrow feature of the md-input component.
+   *   It fixes the scroll jumping issue described in #3070.
+   *
+   *    - https://github.com/angular/material/issues/3070
+   *    - https://material.angularjs.org/latest/api/directive/mdInput
+   *
+   *   The drawback of this simple fix is that it won't shrink the textarea but only
+   *   increase its height. It also requires to set md-no-autogrow.
+   * @memberof SOGo.Common
+   * @ngInject
+   * @example:
+
+     <textarea rows="9" md-no-autogrow sg-autogrow />
+  */
+  sgAutogrow.$inject = ['$timeout'];
+  function sgAutogrow($timeout) {
+    return {
+      restrict: 'A',
+      link: function(scope, elem, attr) {
+        var textarea = elem[0];
+
+        function AutoGrowTextArea() {
+          $timeout(function() {
+            if (textarea.clientHeight < textarea.scrollHeight) {
+              textarea.style.height = textarea.scrollHeight + 'px';
+              if (textarea.clientHeight < textarea.scrollHeight) {
+                textarea.style.height = (textarea.scrollHeight * 2 - textarea.clientHeight) + 'px';
+              }
+            }
+          });
+        }
+
+        textarea.style.overflow = 'hidden';
+
+        elem.on('keyup', AutoGrowTextArea);
+        elem.on('paste', AutoGrowTextArea);
+      }
+    };
+  }
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgAutogrow', sgAutogrow);
+})();