From 26404843c2036351b84964974c3c8d1f648dc237 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Mon, 5 Mar 2018 19:48:39 +0000
Subject: [PATCH] Fix issues with multiline text settings

---
 .../styles/partials/generic/forms/text.scss   | 21 +++++++++++++++++--
 .../ui/components/bd/setting/Multiline.vue    | 15 +++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/client/src/styles/partials/generic/forms/text.scss b/client/src/styles/partials/generic/forms/text.scss
index 7709b624..738af627 100644
--- a/client/src/styles/partials/generic/forms/text.scss
+++ b/client/src/styles/partials/generic/forms/text.scss
@@ -54,7 +54,8 @@
 }
 
 .bd-form-textarea {
-    .bd-form-textarea-wrap {
+    .bd-form-textarea-wrap,
+    textarea.bd-textarea {
         margin-top: 15px;
         background: rgba(0, 0, 0, 0.1);
         border: 1px solid rgba(0, 0, 0, 0.3);
@@ -62,6 +63,7 @@
         color: #b9bbbe;
         overflow-y: scroll;
         max-height: 140px;
+        transition: border-color .2s ease, color .2s ease;
 
         &:focus {
             color: #fff;
@@ -71,9 +73,24 @@
         @include scrollbar;
     }
 
-    div[contenteditable] {
+    div[contenteditable],
+    textarea {
         padding: 11px;
         cursor: text;
+        min-height: 45px;
+    }
+
+    textarea {
+        background: transparent;
+        border: none;
+        resize: none;
+        outline: none;
+        width: 100%;
+        color: inherit;
+        font-size: inherit;
+        box-sizing: border-box;
+        overflow-y: visible;
+        max-height: 140px;
     }
 }
 
diff --git a/client/src/ui/components/bd/setting/Multiline.vue b/client/src/ui/components/bd/setting/Multiline.vue
index a103e61a..bfbea588 100644
--- a/client/src/ui/components/bd/setting/Multiline.vue
+++ b/client/src/ui/components/bd/setting/Multiline.vue
@@ -16,18 +16,21 @@
             </div>
             <div class="bd-hint">{{ setting.hint }}</div>
         </div>
-        <div class="bd-form-textarea-wrap">
-            <div contenteditable="true" @keyup.stop @input="input">{{ setting.value }}</div>
-        </div>
+        <textarea class="bd-textarea" ref="textarea" @keyup.stop @input="recalculateHeight" v-model="setting.value" :disabled="setting.disabled"></textarea>
     </div>
 </template>
 <script>
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         methods: {
-            input(e) {
-                this.change(e.target.textContent);
+            recalculateHeight() {
+                const { textarea } = this.$refs;
+                textarea.style.height = '1px';
+                textarea.style.height = textarea.scrollHeight + 2 + 'px';
             }
+        },
+        mounted() {
+            this.recalculateHeight();
         }
     }
 </script>