Fix suggestion menu during IME composition

[kviethp]

Summary

• Track IME composition while the suggestion menu is open.
• Prevent the no-items auto-close logic from closing mentions for temporary composing queries.
• Add regression coverage for composing queries and compositionend before the committed query loads.

Fixes #1283

Test Plan

• corepack pnpm exec prettier --check packages/react/src/components/SuggestionMenu/SuggestionMenu.test.tsx packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx packages/react/src/components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems.ts
• git diff --check
• corepack pnpm --filter @blocknote/react test
• corepack pnpm --filter @blocknote/react lint
• corepack pnpm --filter @blocknote/core build
• corepack pnpm --filter @blocknote/react build

Summary by CodeRabbit

• Bug Fixes

  • Enhanced suggestion menu stability during IME (input method editor) text composition sessions. The menu now properly handles text composition in languages that require input method editors without closing prematurely or losing state while users actively compose characters.

• Tests

  • Added comprehensive tests validating suggestion menu behavior remains stable during IME composition sessions, including edge cases where composition ends before results load.

[vercel]

Someone is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1cbe6545-9d69-466a-890e-69236288d02c

📥 Commits

Reviewing files that changed from the base of the PR and between 447d9af and a005b6b.

📒 Files selected for processing (3)

• packages/react/src/components/SuggestionMenu/SuggestionMenu.test.tsx
• packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx
• packages/react/src/components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems.ts

---

📝 Walkthrough

Walkthrough

The PR adds IME composition event support to the suggestion menu to fix menu closure during Chinese and other IME-based text input. It updates the close menu hook with composition state awareness, integrates composition event handlers into the wrapper component, and adds tests validating the behavior.

Changes

IME Composition Event Support

Layer / File(s)	Summary
Hook signature and composition-aware close logic packages/react/src/components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems.ts	useCloseSuggestionMenuNoItems accepts a new isComposing parameter; while composing, the hook preserves the current query in a ref and returns early to suppress menu closure, then resumes normal behavior after composition ends only if the query differs from the preserved pre-composition state.
Component composition state and event handler integration packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx	Added isComposing state tracking, installed onCompositionStart/onCompositionEnd event handlers on the content-editable element to toggle the state while preserving any prior handlers, and passed the state to the updated hook.
Test setup and composition behavior validation packages/react/src/components/SuggestionMenu/SuggestionMenu.test.tsx	Migrated to React 18-style createRoot with act handling, added a test asserting closeMenu is not called while isComposing=true, and added a test confirming the menu remains open when composition ends before the committed query loads.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Composition flows with eastern grace,
Menu stays open in its place,
No premature retreat, we say,
Until the typing's done its way. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely summarizes the main change: fixing suggestion menu behavior during IME composition, which is the core focus of the entire changeset.
Description check	✅ Passed	The PR description covers the key aspects (summary, rationale, changes, and testing) but omits the Rationale, Impact, and Screenshots sections from the template.
Linked Issues check	✅ Passed	The changes implement CompositionEvent support (#1283) by tracking IME composition state and preventing premature menu closure during temporary composing queries.
Out of Scope Changes check	✅ Passed	All changes are scoped to IME composition handling: test additions, composition state tracking, and hook parameter updates align with fixing #1283.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}