UInputMenu Focus
Why doesn't this shortcut / to focus on UInputMenu work?
<script setup lang="ts">
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const inputRef = ref<HTMLInputElement | null>(null)
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
defineShortcuts({
'/': {
usingInput: true,
handler: () => {
console.log('Shortcut triggered')
inputRef.value?.focus()
}
}
})
</script>
<template>
<div class="space-y-4">
<div class="flex items-center gap-2">
<UInputMenu
ref="inputRef"
v-model="selected"
v-model:open="filterBuilderMenuOpen"
:options="items"
placeholder="Filter..."
autofocus
@focus="filterBuilderMenuOpen = true"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd>/</UKbd>
</template>
</UInputMenu>
</div>
</div>
</template><script setup lang="ts">
const filterBuilderMenuOpen = ref(false)
const selected = ref('')
const inputRef = ref<HTMLInputElement | null>(null)
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
defineShortcuts({
'/': {
usingInput: true,
handler: () => {
console.log('Shortcut triggered')
inputRef.value?.focus()
}
}
})
</script>
<template>
<div class="space-y-4">
<div class="flex items-center gap-2">
<UInputMenu
ref="inputRef"
v-model="selected"
v-model:open="filterBuilderMenuOpen"
:options="items"
placeholder="Filter..."
autofocus
@focus="filterBuilderMenuOpen = true"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd>/</UKbd>
</template>
</UInputMenu>
</div>
</div>
</template>
