From a0034c51f9f4696cd4f8fd56efa2adfe53dfa145 Mon Sep 17 00:00:00 2001
From: Ian Houghton <sales@redmorello.com>
Date: Wed, 6 May 2020 12:58:00 +0100
Subject: [PATCH] fix #7842 - Render a larger textarea for editing dictionary
 items

---
 .../components/umbtextarea.directive.js       | 59 +++++++++++++++++++
 .../src/views/dictionary/edit.html            |  2 +-
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbtextarea.directive.js

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtextarea.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtextarea.directive.js
new file mode 100644
index 0000000000..8b584b873c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtextarea.directive.js
@@ -0,0 +1,59 @@
+(function () {
+    'use strict';
+
+    function umbTextarea($document) {
+
+        function autogrow(scope, element, attributes) {
+            if (!element.hasClass("autogrow")) {
+                // no autogrow for you today
+                return;
+            }
+
+            // get possible minimum height style
+            var minHeight = parseInt(window.getComputedStyle(element[0]).getPropertyValue("min-height")) || 0;
+
+            // prevent newlines in textbox
+            element.on("keydown", function (evt) {
+                if (evt.which === 13) {
+                    //evt.preventDefault();
+                }
+            });
+
+            element.on("input", function (evt) {
+                element.css({
+                    height: 'auto',
+                    minHeight: 0
+                });
+
+                var contentHeight = this.scrollHeight;
+                var borderHeight = 1;
+                var paddingHeight = 4;
+
+                element.css({
+                    minHeight: null, // remove property
+                    height: contentHeight + borderHeight + paddingHeight + "px" // because we're using border-box
+                });
+            });
+
+            // watch model changes from the outside to adjust height
+            scope.$watch(attributes.ngModel, trigger);
+
+            // set initial size
+            trigger();
+
+            function trigger() {
+                setTimeout(element.triggerHandler.bind(element, "input"), 1);
+            }
+        }
+
+        var directive = {
+            restrict: 'E',
+            link: autogrow
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('textarea', umbTextarea);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html b/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html
index c2b0adec6f..e467588219 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html
@@ -23,7 +23,7 @@
                     <umb-box-content>
                         <p ng-bind-html="vm.description"></p>
                         <umb-property ng-repeat="translation in vm.content.translations" property="translation.property">
-                            <textarea ng-model="translation.translation"></textarea>
+                            <textarea rows="2" class="autogrow" style="width: 100%;" ng-model="translation.translation"></textarea>
                         </umb-property>
                     </umb-box-content>
                 </umb-box>