mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-17 16:24:25 +08:00
fix the filter box could not be input
This commit is contained in:
@@ -29,10 +29,12 @@
|
|||||||
|
|
||||||
<template #no-data>
|
<template #no-data>
|
||||||
<div class="mx-2 mt-2" v-if="enableFilter">
|
<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"
|
:prepend-inner-icon="mdiMagnify"
|
||||||
:placeholder="filterPlaceholder"
|
: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>
|
||||||
<div class="mx-4 my-3" v-show="!filteredItems || !filteredItems.length">
|
<div class="mx-4 my-3" v-show="!filteredItems || !filteredItems.length">
|
||||||
{{ filterNoItemsText }}
|
{{ filterNoItemsText }}
|
||||||
@@ -81,6 +83,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { VTextField } from 'vuetify/components/VTextField';
|
||||||
|
|
||||||
import { ref, computed, useTemplateRef, nextTick } from 'vue';
|
import { ref, computed, useTemplateRef, nextTick } from 'vue';
|
||||||
|
|
||||||
import { useI18n } from '@/locales/helpers.ts';
|
import { useI18n } from '@/locales/helpers.ts';
|
||||||
@@ -91,7 +95,7 @@ import {
|
|||||||
getItemByKeyValue,
|
getItemByKeyValue,
|
||||||
getNameByKeyValue
|
getNameByKeyValue
|
||||||
} from '@/lib/common.ts';
|
} 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 {
|
import {
|
||||||
mdiChevronRight,
|
mdiChevronRight,
|
||||||
@@ -131,6 +135,7 @@ const {
|
|||||||
updateCurrentSecondaryValue
|
updateCurrentSecondaryValue
|
||||||
} = useTwoColumnListItemSelectionBase(props);
|
} = useTwoColumnListItemSelectionBase(props);
|
||||||
|
|
||||||
|
const filterInput = useTemplateRef<VTextField>('filterInput');
|
||||||
const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
|
const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
|
||||||
|
|
||||||
const menuState = ref<boolean>(false);
|
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Reference in New Issue
Block a user