scroll page to bottom when creating a new tag

src/views/base/tags/TagListPageBase.ts

@@ -52,7 +52,7 @@ export function useTagListPageBase() {
         }
     }
 
-    function add(): void {
+    function createNewTag(): void {
         newTag.value = TransactionTag.createNewTag('', activeTagGroupId.value);
     }
 
@@ -78,7 +78,7 @@ export function useTagListPageBase() {
         // functions
         isTagModified,
         switchTagGroup,
-        add,
+        createNewTag,
         edit
     };
 }

src/views/desktop/tags/ListPage.vue

@@ -258,7 +258,7 @@
                                             </template>
                                         </draggable-list>
 
-                                        <tbody v-if="newTag">
+                                        <tbody ref="newTagRow" v-if="newTag">
                                         <tr class="text-sm" :class="{ 'even-row': (availableTagCount & 1) === 1}">
                                             <td>
                                                 <div class="d-flex align-center">
@@ -348,7 +348,7 @@ import RenameDialog from '@/components/desktop/RenameDialog.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
-import { ref, computed, useTemplateRef, watch } from 'vue';
+import { ref, computed, useTemplateRef, watch, nextTick } from 'vue';
 import { useDisplay } from 'vuetify';
 
 import { useI18n } from '@/locales/helpers.ts';
@@ -406,12 +406,13 @@ const {
     hasEditingTag,
     isTagModified,
     switchTagGroup,
-    add,
+    createNewTag,
     edit
 } = useTagListPageBase();
 
 const transactionTagsStore = useTransactionTagsStore();
 
+const newTagRow = useTemplateRef<HTMLElement>('newTagRow');
 const tagGroupChangeDisplayOrderDialog = useTemplateRef<TagGroupChangeDisplayOrderDialogType>('tagGroupChangeDisplayOrderDialog');
 const renameDialog = useTemplateRef<RenameDialogType>('renameDialog');
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
@@ -461,6 +462,14 @@ function reload(): void {
     });
 }
 
+function add(): void {
+    createNewTag();
+
+    nextTick(() => {
+        newTagRow.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    });
+}
+
 function addTagGroup(): void {
     renameDialog.value?.open('', tt('New Tag Group Name')).then((newName: string) => {
         updating.value = true;

src/views/mobile/tags/ListPage.vue

@@ -118,7 +118,7 @@
                 </f7-swipeout-actions>
             </f7-list-item>
 
-            <f7-list-item class="editing-list-item" v-if="newTag">
+            <f7-list-item ref="newTagItem" class="editing-list-item" v-if="newTag">
                 <template #media>
                     <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                 </template>
@@ -219,7 +219,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, useTemplateRef, nextTick } from 'vue';
 import type { Router } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
@@ -257,12 +257,14 @@ const {
     hasEditingTag,
     isTagModified,
     switchTagGroup,
-    add,
+    createNewTag,
     edit
 } = useTagListPageBase();
 
 const transactionTagsStore = useTransactionTagsStore();
 
+const newTagItem = useTemplateRef<{ $el: HTMLElement }>('newTagItem');
+
 const loadingError = ref<unknown | null>(null);
 const sortable = ref<boolean>(false);
 const moveToTagGroupId = ref<string | undefined>(undefined);
@@ -336,6 +338,18 @@ function reload(done?: () => void): void {
     });
 }
 
+function add(): void {
+    createNewTag();
+
+    nextTick(() => {
+        const el = newTagItem.value?.$el as HTMLElement | undefined;
+
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    });
+}
+
 function save(tag: TransactionTag): void {
     showLoading();