<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>