fix(InputMenu): emit focus event (#2386)

Co-authored-by: Benjamin Canac <[email protected]>

docs/app/components/content/examples/input-menu/InputMenuOpenFocusExample.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const open = ref(false)
+const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+const selected = ref('Backlog')
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    v-model:open="open"
+    :items="items"
+    @focus="open = true"
+  />
+</template>

docs/content/3.components/input-menu.md

@@ -611,6 +611,16 @@ name: 'input-menu-open-example'
 In this example, press :kbd{value="O"} to toggle the InputMenu.
 ::
 
+### Control open state on focus
+
+You can also use the `@focus` directive to control the open state.
+
+::component-example
+---
+name: 'input-menu-open-focus-example'
+---
+::
+
 ### Control search term
 
 Use the `v-model:search-term` directive to control the search term.

src/runtime/components/InputMenu.vue

@@ -228,6 +228,10 @@ function onBlur(event: FocusEvent) {
   emitFormBlur()
 }
 
+function onFocus(event: FocusEvent) {
+  emits('focus', event)
+}
+
 function onUpdateOpen(value: boolean) {
   if (!value) {
     const event = new FocusEvent('blur')
@@ -269,6 +273,7 @@ defineExpose({
         delimiter=""
         as-child
         @blur="onBlur"
+        @focus="onFocus"
       >
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="ui.tagsItem({ class: props.ui?.tagsItem })">
           <TagsInputItemText :class="ui.tagsItemText({ class: props.ui?.tagsItemText })">
@@ -305,6 +310,7 @@ defineExpose({
         :required="required"
         :class="ui.base({ class: props.ui?.base })"
         @blur="onBlur"
+        @focus="onFocus"
       />
 
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">