Text does not properly sync content when characters are input via numpad (Alt+character code)

[stakx]

Say you have a Text whose DOM element currently contains the text A. Now you enter a B, but not by pressing the B key, but via the numpad: Alt+066. (This input mode could be Windows-specific.) You'll see the text AB in the browser, as you'd expect. When you leave that input, it will revert back to A (i.e. the B gets deleted again, which is an error).

My working theory is that this is because the Text._keyUp event for the last key (6 or Alt) happens before the browser adds the input character in the DOM. Text._keyUp then triggers Text._syncContent which reads A from the DOM node. The B character isn't there yet, so _syncContent misses it and only sees the characters A. When blurring the input node, it'll revert back to the last cached content A.

[stakx]

TL;DR: This bug could be fixed by calling _syncContent in response to input (instead of keyup) events.

My working theory is that this is because the Text._keyUp event for the last key (6 or Alt) happens before the browser adds the input character in the DOM.

I've verified this (in recent versions of Edge, Brave, and Firefox). Here are the keyboard event sequences (as generated by my Chromium-based browser)...

• When a "B" is input as B:

  • keypress with code: "KeyB"
  • beforeinput with inputType: "insertText", data: "B". At this point, the DOM has not yet been updated.
  • input with inputType: "insertText", data: "B". At this point, the DOM has been updated.
  • keyup with code: "KeyB"

  Here, keyup happens after the DOM has been updated, so everything works as it should.

• When a "B" is input using the numpad, i.e. Alt066:

  • keydown with code: "AltLeft"
  • keydown with code: "Numpad0"
  • keyup with code: "Numpad0"
  • keydown with code: "Numpad6"
  • keyup with code: "Numpad6"
  • keydown with code: "Numpad6"
  • keyup with code: "Numpad6"
  • keyup with code: "AltLeft"
  • keypress with code: "AltLeft"
  • beforeinput with inputType: "insertText", data: "B". At this point, the DOM has not yet been updated.
  • input with inputType: "insertText", data: "B". At this point, the DOM has been updated.

  Here, keyup happens before the DOM has been updated, so syncContent will get stale data.

My tests suggest that the DOM gets updated between the beforeinput and input events, but those events don't necessarily happen before keyup. So it appears we should listen to input instead of keyup.