From 6b5aac0111bfed3f9f56b9dcfa3d3f3401b24924 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 9 Aug 2025 02:13:06 +0800
Subject: [PATCH] fix the filter box could not be input

---
 src/components/desktop/TwoColumnSelect.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/desktop/TwoColumnSelect.vue b/src/components/desktop/TwoColumnSelect.vue
index 5428e97f..c6b8b358 100644
--- a/src/components/desktop/TwoColumnSelect.vue
+++ b/src/components/desktop/TwoColumnSelect.vue
@@ -29,10 +29,12 @@
 
         <template #no-data>
             <div class="mx-2 mt-2" v-if="enableFilter">
-                <v-text-field density="compact"
+                <v-text-field eager ref="filterInput" density="compact"
                               :prepend-inner-icon="mdiMagnify"
                               :placeholder="filterPlaceholder"
-                              v-model="filterContent"></v-text-field>
+                              v-model="filterContent"
+                              @click:control="onInputFocused(filterInput, true)"
+                              @update:focused="onInputFocused(filterInput, $event)"></v-text-field>
             </div>
             <div class="mx-4 my-3" v-show="!filteredItems || !filteredItems.length">
                 {{ filterNoItemsText }}
@@ -81,6 +83,8 @@
 </template>
 
 <script setup lang="ts">
+import { VTextField } from 'vuetify/components/VTextField';
+
 import { ref, computed, useTemplateRef, nextTick } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
@@ -91,7 +95,7 @@ import {
     getItemByKeyValue,
     getNameByKeyValue
 } from '@/lib/common.ts';
-import { type ComponentDensity, type InputVariant, scrollToSelectedItem } from '@/lib/ui/desktop.ts';
+import { type ComponentDensity, type InputVariant, setChildInputFocus, scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 import {
     mdiChevronRight,
@@ -131,6 +135,7 @@ const {
     updateCurrentSecondaryValue
 } = useTwoColumnListItemSelectionBase(props);
 
+const filterInput = useTemplateRef<VTextField>('filterInput');
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
 
 const menuState = ref<boolean>(false);
@@ -219,6 +224,14 @@ function onMenuStateChanged(state: boolean): void {
         });
     }
 }
+
+function onInputFocused(input: VTextField | null | undefined, focused: boolean): void {
+    if (input && focused) {
+        nextTick(() => {
+            setChildInputFocus(input?.$el, 'input');
+        });
+    }
+}
 </script>
 
 <style>