fix(dashboard): prevent React from dropping first keystroke during IME composition

React 18's root-level event delegation intercepts keydown events with
keyCode 229 (the "composition in progress" signal sent by the browser
during non-Latin IME input) and synthesises an onCompositionStart event.
That synthetic path sets internal composing state that interferes with
xterm.js's own IME handling on its hidden textarea, causing the first
keystroke of each composition chunk to be silently dropped.

The fix adds a capture-phase keydown listener on the terminal host div
that stops propagation of keyCode-229 events before they reach React's
delegation layer.  xterm.js relies on native compositionstart/
compositionend on its internal textarea — not on keydown — so blocking
the propagation is safe.

Fixes #52111
This commit is contained in:
liuhao1024
2026-06-25 03:47:28 +08:00
committed by Teknium
parent e2f7850ec3
commit 2af4da45ec

View File

@@ -748,6 +748,30 @@ export default function ChatPage({ isActive = true }: { isActive?: boolean }) {
let mobileInputCleanup: (() => void) | null = null;
term.open(host);
// IME composition guard (fixes #52111).
//
// React 18's root-level event delegation intercepts keydown events with
// keyCode 229 (the "composition in progress" signal sent by the browser
// during non-Latin IME input) and synthesises an onCompositionStart
// event. That synthetic path sets internal composing state that
// interferes with xterm.js's own IME handling on its hidden textarea,
// causing the first keystroke of each composition chunk to be silently
// dropped — most visible with Cyrillic (Ukrainian/Russian) on
// Firefox-based browsers, but affects any locale that uses composition
// events (CJK, Arabic, Hebrew).
//
// xterm.js relies on native compositionstart/compositionend on its
// internal textarea, not on keydown, so blocking the keyCode-229
// keydown from reaching React's delegation layer is safe. The listener
// sits in the *capture* phase on the terminal host so it fires before
// the event bubbles up to the React root.
const _imeCompositionGuard = (e: KeyboardEvent) => {
if (e.keyCode === 229 || e.key === "Process") {
e.stopPropagation();
}
};
host.addEventListener("keydown", _imeCompositionGuard, true);
const textarea = term.textarea;
if (textarea) {
textarea.setAttribute("autocomplete", "off");
@@ -1331,6 +1355,7 @@ export default function ChatPage({ isActive = true }: { isActive?: boolean }) {
// the ticket fetch resolves and ``wsRef.current`` was never assigned.
wsRef.current?.close();
wsRef.current = null;
host.removeEventListener("keydown", _imeCompositionGuard, true);
term.dispose();
termRef.current = null;
fitRef.current = null;