Mask Input, manually inputting non ASCII characters remains displayed

[Wesley Lee]

Reproduction

https://formkit.link/3c7406dd5ca34987eb71b54d4b3b73df

Describe the bug

I'm currently working with the mask input to disallow foreign characters, but the behavior is unexpected compared to other inputs like in number. When manually inputting a non ASCII character into a mask input and using a token to only allow ASCII characters, mask does not prevent the non ASCII characters from displaying and has erratic IME behavior.

Observed behavior:
Invalid character(s), like non ASCII / JA strings, are not removed from display upon input. The IME input is also partially committed to the value.

mask_ime.mov

Unlike type="number" inputs where the IME input is not partially committed and the non ASCII character(s) is removed.

Screen.Recording.2024-04-23.at.3.03.07.PM.mov

Expected behavior:

The invalid character should be removed upon manual input and parts of the IME input should not be committed.

Environment

• OS: [e.g. iOS]
Ventura 13.1 M1
• Browser [e.g. chrome, safari]
Chrome
• Version [e.g. 22]
124.0.6367.60

[Justin Schroeder]

@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?

[Wesley Lee]

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

[Wesley Lee]

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