Fix issues with multiline text settings

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;
     }
 }
 

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">
+        <textarea class="bd-textarea" ref="textarea" @keyup.stop @input="recalculateHeight" v-model="setting.value" :disabled="setting.disabled"></textarea>
-            <div contenteditable="true" @keyup.stop @input="input">{{ setting.value }}</div>
-        </div>
     </div>
 </template>
 <script>
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         methods: {
-            input(e) {
+            recalculateHeight() {
-                this.change(e.target.textContent);
+                const { textarea } = this.$refs;
+                textarea.style.height = '1px';
+                textarea.style.height = textarea.scrollHeight + 2 + 'px';
             }
+        },
+        mounted() {
+            this.recalculateHeight();
         }
     }
 </script>