automatically scroll to the selected item when opening the language selection drop down list menu

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>