From 7802aacf3f5be572dd64c3288196432a41f06b0e Mon Sep 17 00:00:00 2001
From: Tomy Kho <tomy.kho@esseplore.com>
Date: Fri, 18 Oct 2024 21:09:04 +0700
Subject: [PATCH] fix(InputMenu): emit `focus` event (#2386)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../input-menu/InputMenuOpenFocusExample.vue       | 14 ++++++++++++++
 docs/content/3.components/input-menu.md            | 10 ++++++++++
 src/runtime/components/InputMenu.vue               |  6 ++++++
 3 files changed, 30 insertions(+)
 create mode 100644 docs/app/components/content/examples/input-menu/InputMenuOpenFocusExample.vue

diff --git a/docs/app/components/content/examples/input-menu/InputMenuOpenFocusExample.vue b/docs/app/components/content/examples/input-menu/InputMenuOpenFocusExample.vue
new file mode 100644
index 0000000000..c52fc45772
--- /dev/null
+++ b/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>
diff --git a/docs/content/3.components/input-menu.md b/docs/content/3.components/input-menu.md
index 628d07b699..4eddd99a2e 100644
--- a/docs/content/3.components/input-menu.md
+++ b/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.
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 74c2f0f87e..b67495fc66 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/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 })">