Skip to content

fix(web): close slash and mention menus on click outside#948

Open
tomsen-ai wants to merge 1 commit into
MoonshotAI:mainfrom
tomsen-ai:fix/web-slash-menu-click-outside
Open

fix(web): close slash and mention menus on click outside#948
tomsen-ai wants to merge 1 commit into
MoonshotAI:mainfrom
tomsen-ai:fix/web-slash-menu-click-outside

Conversation

@tomsen-ai

Copy link
Copy Markdown

Closes #947

This PR closes the slash menu and @ mention menu when the user clicks outside the composer input area.

What changed

  • Added a cinWrapRef to the composer input wrapper.
  • Added a document click listener while either menu is open.
  • Clicking outside .cin-wrap now closes both menus, matching the behavior of other dropdowns in the composer (e.g., the permission dropdown).
  • Removed the listener when both menus are closed or when the component unmounts.

How to verify

  1. Open Kimi Web and start a session.
  2. Type / in the composer — the slash menu appears.
  3. Click outside the menu (e.g., on the chat history) — the menu should close.
  4. Repeat with @ — the mention menu should also close on outside click.
  5. Confirm that Esc, selecting an item, and submitting a message still close the menus as before.

Notes

  • This is a small focused UI fix; no public API changes.
  • A changeset has been added for @moonshot-ai/kimi-web.

@changeset-bot

changeset-bot Bot commented Jun 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6f448dc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@moonshot-ai/kimi-web Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 95e0184a95

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment on lines +341 to +343
watch(() => slashOpen.value || mentionOpen.value, (open) => {
if (open) {
document.addEventListener('click', onComposerDocClick, true);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Cancel pending mention lookups on outside clicks

When a user types @ and clicks the chat area before the 200 ms mention debounce fires, mentionOpen is still false, so this watcher has not installed the document click listener yet. The pending mentionTimer callback can then run after the composer has lost focus and set mentionOpen = true, leaving the mention menu open even though the user already clicked outside; the outside-close path needs to cancel pending mention work or listen while a mention search is pending.

Useful? React with 👍 / 👎.

@tomsen-ai tomsen-ai force-pushed the fix/web-slash-menu-click-outside branch from 95e0184 to 2f696e6 Compare June 20, 2026 10:27
@tomsen-ai tomsen-ai force-pushed the fix/web-slash-menu-click-outside branch from 2f696e6 to 6f448dc Compare June 23, 2026 03:10
@tomsen-ai

Copy link
Copy Markdown
Author

Hi team, this PR is now rebased onto the latest main and ready for review.

What it fixes: the slash (/) and mention (@) popup menus in Composer.vue did not close when clicking outside the composer area.

What changed:

  • Added a document-level click listener while either menu is open.
  • Clicking inside the composer wrapper keeps the menu open; clicking anywhere outside closes both menus.
  • Clears the pending mention search debounce timer on outside click so the menu doesn't reopen after an async search returns.

I verified the fix manually in the local dev server. Thanks for taking a look!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(web): slash menu and mention menu do not close on click outside

1 participant