From a09d7b57f98761977786007135d8ce572ed034a0 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 21 Dec 2025 02:34:57 +0800
Subject: [PATCH] automatically scroll to the selected item when opening the
 language selection drop down list menu

---
 .../desktop/LanguageSelectButton.vue          | 25 ++++++++++++++++---
 .../mobile/LanguageSelectButton.vue           | 10 +++++++-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/desktop/LanguageSelectButton.vue b/src/components/desktop/LanguageSelectButton.vue
index ec4f64ee..c9d1d167 100644
--- a/src/components/desktop/LanguageSelectButton.vue
+++ b/src/components/desktop/LanguageSelectButton.vue
@@ -1,15 +1,17 @@
 <template>
-    <v-menu location="bottom" max-height="500">
+    <v-menu location="bottom" max-height="500" @update:model-value="onMenuStateChanged">
         <template #activator="{ props }">
             <v-btn variant="text" :disabled="disabled" v-bind="props">{{ currentLanguageName }}</v-btn>
         </template>
-        <v-list>
-            <v-list-item :key="lang.languageTag" :value="lang.languageTag" v-for="lang in allLanguages">
+        <v-list ref="languageMenu">
+            <v-list-item :key="lang.languageTag" :value="lang.languageTag"
+                         :class="{ 'list-item-selected': isLanguageSelected(lang.languageTag) }"
+                         v-for="lang in allLanguages">
                 <v-list-item-title class="cursor-pointer" @click="updateLanguage(lang.languageTag)">
                     <div class="d-flex align-center">
                         <span>{{ lang.nativeDisplayName }}</span>
                         <v-spacer style="min-width: 40px" />
-                        <v-icon :icon="mdiCheck" v-if="isLanguageSelected(lang.languageTag)" />
+                        <v-icon color="primary" :icon="mdiCheck" v-if="isLanguageSelected(lang.languageTag)" />
                         <span class="text-field-append-text" v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
                     </div>
                 </v-list-item-title>
@@ -19,8 +21,13 @@
 </template>
 
 <script setup lang="ts">
+import { VList } from 'vuetify/components/VList';
 import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
 
+import { useTemplateRef, nextTick } from 'vue';
+
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+
 import {
     mdiCheck
 } from '@mdi/js';
@@ -34,4 +41,14 @@ const {
     updateLanguage,
     isLanguageSelected
 } = useLanguageSelectButtonBase(props, emit);
+
+const languageMenu = useTemplateRef<VList>('languageMenu');
+
+function onMenuStateChanged(state: boolean): void {
+    if (state) {
+        nextTick(() => {
+            scrollToSelectedItem(languageMenu.value?.$el, null, null, 'div.v-list-item.list-item-selected');
+        });
+    }
+}
 </script>
diff --git a/src/components/mobile/LanguageSelectButton.vue b/src/components/mobile/LanguageSelectButton.vue
index 160154cd..20b79018 100644
--- a/src/components/mobile/LanguageSelectButton.vue
+++ b/src/components/mobile/LanguageSelectButton.vue
@@ -1,9 +1,10 @@
 <template>
     <f7-button class="language-select-button" small popover-open=".lang-popover-menu" :disabled="disabled" :text="currentLanguageName"></f7-button>
 
-    <f7-popover class="lang-popover-menu">
+    <f7-popover class="lang-popover-menu" @popover:open="onPopoverOpen">
         <f7-list dividers>
             <f7-list-item link="#" no-chevron popover-close
+                          :class="{ 'list-item-selected': isLanguageSelected(lang.languageTag) }"
                           :key="lang.languageTag"
                           :title="lang.nativeDisplayName"
                           v-for="lang in allLanguages"
@@ -20,6 +21,9 @@
 <script setup lang="ts">
 import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
 
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom } from '@/lib/ui/mobile.ts';
+
 const props = defineProps<LanguageSelectBaseProps>();
 const emit = defineEmits<LanguageSelectBaseEmits>();
 
@@ -29,6 +33,10 @@ const {
     updateLanguage,
     isLanguageSelected
 } = useLanguageSelectButtonBase(props, emit);
+
+function onPopoverOpen(event: { $el: Framework7Dom }): void {
+    scrollToSelectedItem(event.$el[0], '.popover-inner', '.popover-inner', 'li.list-item-selected');
+}
 </script>
 
 <style>