IME helper is always 1 step behind the character, which makes the first character very broken

[Tyriar]

Related to microsoft/vscode#11334

The first character shows the IME helper off screen.

The second character shows it where it should be on the first character.

The root cause of this is because we keep the textarea off screen until it a compositionupdate event fire at which point it's moved to where the cursor is. One way this issue could be fixed is by no longer hiding the textarea offscreen and instead keeping it in sync with the cursor. Syncing the position on keydown would probably fix this issue because it would happen before updatecomposition fires.

I think the only reason we moved it off screen to begin with was because some browsers show the resize handle even when the textarea has a size of 0x0. There is a standard CSS rule resize that can hide this though so it might be worth bringing it back and keeping it in sync.

textarea {
    resize: none;
}

Details

• Browser and browser version: Chrome v52
• OS version: Ubuntu 16.04 using Hangul IBus IME
• xterm.js version: 59e72b8

Steps to reproduce

1. Start demo
2. Start inputting hanja

[Tyriar]

@parisk was there anything I'm missing on why the textarea helper was kept off screen?

[parisk]

Totally missed this. No @Tyriar the only reason it is kept off-screen is to make it completely invisible, so if we can achieve this by keeping the textarea in-sync, then 👍 .

I took a look at how CodeMirror handles this and it seems that it keeps the textarea in-sync as well:

[Tyriar]

@parisk the comment in the code mentions the cursor in IE, I wonder if this was fixed in IE 11+ in which case we don't really care.

[Tyriar]

I think this is fixed now