diff --git a/src/browser/CoreBrowserTerminal.ts b/src/browser/CoreBrowserTerminal.ts index 06d378862..1b18a17ee 100644 --- a/src/browser/CoreBrowserTerminal.ts +++ b/src/browser/CoreBrowserTerminal.ts @@ -414,7 +414,16 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal { this._register(addDisposableListener(this.textarea!, 'keyup', (ev: KeyboardEvent) => this._keyUp(ev), true)); this._register(addDisposableListener(this.textarea!, 'keydown', (ev: KeyboardEvent) => this._keyDown(ev), true)); this._register(addDisposableListener(this.textarea!, 'keypress', (ev: KeyboardEvent) => this._keyPress(ev), true)); - this._register(addDisposableListener(this.textarea!, 'compositionstart', () => this._compositionHelper!.compositionstart())); + this._register(addDisposableListener(this.textarea!, 'compositionstart', () => { + // Ensure the textarea is synced to the latest cursor location before composition begins. This + // is to workaround a problem where highly dynamic TUIs like agentic CLIs reprint agressively + // would cause the IME to appear in the wrong position. The theory is that when the IME is + // triggered during a partial render the textarea position becomes locked and will not move + // until it is hidden and a custom move occurs. + this._syncTextArea(); + this._compositionHelper!.compositionstart(); + this._compositionHelper!.updateCompositionElements(); + })); this._register(addDisposableListener(this.textarea!, 'compositionupdate', (e: CompositionEvent) => this._compositionHelper!.compositionupdate(e))); this._register(addDisposableListener(this.textarea!, 'compositionend', () => this._compositionHelper!.compositionend())); this._register(addDisposableListener(this.textarea!, 'input', (ev: InputEvent) => this._inputEvent(ev), true));