From 034df704dfb325347b1b1be630492357a8a1bb17 Mon Sep 17 00:00:00 2001
From: tomsen-ai <230283659+tomsen-ai@users.noreply.github.com>
Date: Sat, 20 Jun 2026 18:19:31 +0800
Subject: [PATCH] fix(web): close slash and mention menus on click outside

---
 .changeset/slash-menu-click-outside.md        |  5 +++
 .../kimi-web/src/components/chat/Composer.vue | 35 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/slash-menu-click-outside.md

diff --git a/.changeset/slash-menu-click-outside.md b/.changeset/slash-menu-click-outside.md
new file mode 100644
index 000000000..f01d23d6f
--- /dev/null
+++ b/.changeset/slash-menu-click-outside.md
@@ -0,0 +1,5 @@
+---
+'@moonshot-ai/kimi-web': patch
+---
+
+Close slash and mention menus when clicking outside the composer.
diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index 075a7ef24..bebbc2733 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -133,6 +133,38 @@ const {
   searchFiles: () => props.searchFiles,
 });
 
+// ---------------------------------------------------------------------------
+// Close slash/mention menus on click outside
+// ---------------------------------------------------------------------------
+
+const cinWrapRef = ref<HTMLDivElement | null>(null);
+
+function closeMenus(): void {
+  slashOpen.value = false;
+  mentionOpen.value = false;
+  // Cancel any pending mention lookup so the menu does not re-open after an
+  // outside click while the debounced search is still in flight.
+  if (mentionTimer !== null) {
+    clearTimeout(mentionTimer);
+    mentionTimer = null;
+  }
+  mentionLoading.value = false;
+}
+
+function onComposerDocClick(e: MouseEvent): void {
+  const t = e.target as Node;
+  if (cinWrapRef.value?.contains(t)) return;
+  closeMenus();
+}
+
+watch(() => slashOpen.value || mentionOpen.value, (open) => {
+  if (open) {
+    document.addEventListener('click', onComposerDocClick, true);
+  } else {
+    document.removeEventListener('click', onComposerDocClick, true);
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Input event handler — updates both menus
 // ---------------------------------------------------------------------------
@@ -452,6 +484,7 @@ function onDocClick(e: MouseEvent): void {
 
 onUnmounted(() => {
   document.removeEventListener('click', onDocClick, true);
+  document.removeEventListener('click', onComposerDocClick, true);
 });
 
 // Context formatting
@@ -637,7 +670,7 @@ function selectModel(modelId: string): void {
     <!-- Main composer card -->
     <div class="composer-card">
       <!-- Input row with popup menus -->
-      <div class="cin-wrap">
+      <div ref="cinWrapRef" class="cin-wrap">
         <!-- Slash menu (above textarea) -->
         <SlashMenu
           v-if="slashOpen"