From e96db5d0d683a016b391b65f53a6a2e4440701bc Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 24 Sep 2025 16:14:45 +0800
Subject: [PATCH] fix: keep dropdown at bottom after loading more

---
 frontend_nuxt/components/Dropdown.vue  | 16 ++++++++++++++--
 frontend_nuxt/components/TagSelect.vue |  4 +++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend_nuxt/components/Dropdown.vue b/frontend_nuxt/components/Dropdown.vue
index eb41f177b..147a0d5fe 100644
--- a/frontend_nuxt/components/Dropdown.vue
+++ b/frontend_nuxt/components/Dropdown.vue
@@ -52,6 +52,7 @@
       v-if="open && !isMobile && (loading || filteredOptions.length > 0 || showSearch)"
       :class="['dropdown-menu', menuClass]"
       v-click-outside="close"
+      ref="menuRef"
     >
       <div v-if="showSearch" class="dropdown-search">
         <search-icon class="search-icon" />
@@ -89,7 +90,7 @@
           <next class="back-icon" @click="close" />
           <span class="mobile-title">{{ placeholder }}</span>
         </div>
-        <div class="dropdown-mobile-menu">
+        <div class="dropdown-mobile-menu" ref="mobileMenuRef">
           <div v-if="showSearch" class="dropdown-search">
             <search-icon class="search-icon" />
             <input type="text" v-model="search" placeholder="搜索" />
@@ -153,6 +154,8 @@ export default {
     const loaded = ref(false)
     const loading = ref(false)
     const wrapper = ref(null)
+    const menuRef = ref(null)
+    const mobileMenuRef = ref(null)
     const isMobile = useIsMobile()
 
     const toggle = () => {
@@ -202,6 +205,13 @@ export default {
       }
     }
 
+    const scrollToBottom = () => {
+      const el = isMobile.value ? mobileMenuRef.value : menuRef.value
+      if (el) {
+        el.scrollTop = el.scrollHeight
+      }
+    }
+
     const reload = async () => {
       await loadOptions(props.remote ? search.value : undefined)
     }
@@ -255,7 +265,7 @@ export default {
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
     }
 
-    expose({ toggle, close, reload })
+    expose({ toggle, close, reload, scrollToBottom })
 
     return {
       open,
@@ -265,6 +275,8 @@ export default {
       search,
       filteredOptions,
       wrapper,
+      menuRef,
+      mobileMenuRef,
       selectedLabels,
       isSelected,
       loading,
diff --git a/frontend_nuxt/components/TagSelect.vue b/frontend_nuxt/components/TagSelect.vue
index 4864814eb..d338a58c0 100644
--- a/frontend_nuxt/components/TagSelect.vue
+++ b/frontend_nuxt/components/TagSelect.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watch, nextTick } from 'vue'
 import { toast } from '~/main'
 import Dropdown from '~/components/Dropdown.vue'
 const config = useRuntimeConfig()
@@ -164,6 +164,8 @@ const loadMoreRemoteTags = async () => {
   loadMoreRequested.value = true
   try {
     await dropdownRef.value?.reload()
+    await nextTick()
+    dropdownRef.value?.scrollToBottom?.()
   } catch (e) {
     console.error('Failed to load more tags', e)
     loadMoreRequested.value = false