Mask Input, manually inputting non ASCII characters remains displayed about formkit HOT 3 OPEN

@leewes thanks for filing this! I have to admit I’m a noob when it comes to IME’s of any kind and a bit unsure how to even begin testing them. Perhaps you could assist me somewhat. The mask input uses the beforeinput event — do you have any thoughts on how I could simulate an IME interaction to test what kind of events we are receiving at that event?

from formkit.

The mask input uses the beforeinput event — do you have any thoughts on how I could simulate an IME interaction to test what kind of events we are receiving at that event?

@justin-schroeder certainly! Though granted I'm also a bit new at this as well, so bear with me 😅

I'm not sure if there's a good way to simulate them without an IME.. From what I could tell by monitoring the element, IME inputs trigger composition events in addition to the key press, beforeInput, and input events.

Not sure if this might help, but I created a somewhat incomplete example in sandbox:

• https://formkit.link/397be3153dc368b9eb4f83a642c65196

that generates an composition event with the data of the v-model-ed value of a Dispatched Event Data field and fires the set of events in order when the buttons below are clicked. Each button represents a key press in IME and fires them in the order observed from monitoring the input.

Example:
Generally the events are fired in this sort of sequence

• start -> update (x times) -> end (from enter or clicking out)

for a string input like テスト it's

1. composition start, the dispatched data is t on first key press in IME (key code is T)
2. composition updates

• The dispatched event data values on each following key press
  i. テ on second key press (key code is E)
  ii. テs on third key press (key code is S)
  iii. テス on fourth key press (key code is U)
  iv. テスt on fifth key press (key code is T)
  v. テスト on sixth key press (key code is O)

3. composition end, the value in the field is テスト on 'Enter' key press

from formkit.

For reference, a true ime input on a simpler string input like aa -> ああ looks like this on the events fired:

from formkit.