fix the filter box could not be input

This commit is contained in:
MaysWind
2025-08-09 02:13:06 +08:00
parent dc4a4e1463
commit 6b5aac0111
+16 -3
View File
@@ -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>