From 84f6883e71f300be05247e178c6adfeda7ccb214 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 6 Feb 2021 16:35:08 +0800
Subject: [PATCH] support changing textarea height automatically in
 account/category edit page

---
 src/views/mobile/accounts/Edit.vue   | 19 +++++++++++++++++++
 src/views/mobile/categories/Edit.vue | 15 +++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/views/mobile/accounts/Edit.vue b/src/views/mobile/accounts/Edit.vue
index 68e30ef5..5adc0b34 100644
--- a/src/views/mobile/accounts/Edit.vue
+++ b/src/views/mobile/accounts/Edit.vue
@@ -142,6 +142,8 @@
 
                     <f7-list-input
                         type="textarea"
+                        class="textarea-auto-size"
+                        style="height: auto"
                         :placeholder="$t('Your account description (optional)')"
                         :value="account.comment"
                         @input="account.comment = $event.target.value"
@@ -192,6 +194,8 @@
 
                     <f7-list-input
                         type="textarea"
+                        class="textarea-auto-size"
+                        style="height: auto"
                         :placeholder="$t('Your account description (optional)')"
                         :value="account.comment"
                         @input="account.comment = $event.target.value"
@@ -276,6 +280,8 @@
 
                         <f7-list-input
                             type="textarea"
+                            class="textarea-auto-size"
+                            style="height: auto"
                             :placeholder="$t('Your sub account description (optional)')"
                             :value="subAccount.comment"
                             @input="subAccount.comment = $event.target.value"
@@ -435,6 +441,9 @@ export default {
             self.loading = false;
         }
     },
+    updated: function () {
+        this.autoChangeCommentTextareaSize();
+    },
     methods: {
         addSubAccount() {
             const self = this;
@@ -567,6 +576,16 @@ export default {
                 }
             });
         },
+        autoChangeCommentTextareaSize() {
+            const app = this.$f7;
+            const $$ = app.$;
+
+            $$('.textarea-auto-size textarea').each((idx, el) => {
+                el.scrollTop = 0;
+                el.style.height = '';
+                el.style.height = el.scrollHeight + 'px';
+            });
+        },
         chooseSuitableIcon(oldCategory, newCategory) {
             const allCategories = this.$constants.account.allCategories;
 
diff --git a/src/views/mobile/categories/Edit.vue b/src/views/mobile/categories/Edit.vue
index e0249d01..84a840a0 100644
--- a/src/views/mobile/categories/Edit.vue
+++ b/src/views/mobile/categories/Edit.vue
@@ -66,6 +66,8 @@
 
                     <f7-list-input
                         type="textarea"
+                        class="textarea-auto-size"
+                        style="height: auto"
                         :placeholder="$t('Your category description (optional)')"
                         :value="category.comment"
                         @input="category.comment = $event.target.value"
@@ -185,6 +187,9 @@ export default {
             self.loading = false;
         }
     },
+    updated: function () {
+        this.autoChangeCommentTextareaSize();
+    },
     methods: {
         save() {
             const self = this;
@@ -235,6 +240,16 @@ export default {
                     self.$toast(error.message || error);
                 }
             });
+        },
+        autoChangeCommentTextareaSize() {
+            const app = this.$f7;
+            const $$ = app.$;
+
+            $$('.textarea-auto-size textarea').each((idx, el) => {
+                el.scrollTop = 0;
+                el.style.height = '';
+                el.style.height = el.scrollHeight + 'px';
+            });
         }
     }
 }