taiga-family/maskito

๐Ÿš€ - New plugin to enable validation on every keystroke for composition event (IME)

glebcha opened this issue ยท 5 comments

glebcha commented

Playground Link

https://stackblitz.com/edit/maskito-article-demo?file=index.ts

Description

Screen_Recording_20240104_161056_Chrome.mp4

Angular version

No response

Taiga UI version

No response

Which browsers have you used?

  • Chrome
  • Firefox
  • Safari
  • Edge

Which operating systems have you used?

  • macOS
  • Windows
  • Linux
  • iOS
  • Android
nsbarsukov commented

@glebcha Hello!

I hope that this bug was fixed in 1.5.0 release.
I've updated Maskito's version in the stackblitz's article (1.0.0 => 1.9.0).
Could you check it again ?

glebcha commented

@glebcha Hello!

I hope that this bug was fixed in 1.5.0 release.
I've updated Maskito's version in the stackblitz's article (1.0.0 => 1.9.0).
Could you check it again ?

But there is another sort of bug with 1.9.0.
First enter letters, then enter numbers and only then any special character.....input will be cleared of any non-digit characters.
Android 14, latest Chrome version, Samsung S23.

glebcha commented

Anyone faced this issue, be aware of https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent.
I mean this behavior is expected when you have autocomplete enabled and not yet selected one of proposed autocompletion variants or pressed space to follow shadowed input value.
@nsbarsukov I guess better add this to official documentation and "readme".

nsbarsukov commented

Problem

Some Androids always interprets their input as CompositionEvent.
Maskito will validate their input when compositionend-event is fired.

By default, Maskito does not break IME Composition (wait until it ends to calibrate value).
Maskito behaves in this way now (no changes are required).

It is default behaviour for other popular mask library too: imask, ngx-mask.
On another side, another popular legacy library โ€“ text-mask can break IME if intermediate value does not satisfy mask's constraint.

Discussion

There is not right-solution for this case.
If we validate intermediate composition's value on every keystroke => we break core concept of IME (Japanese, Chinese and etc).
If we don't validate intermediate composition's value on every keystroke => Maskito waits until it will finish => Sometimes it is not required (for example, input of numbers).

Proposed solution

By default, Maskito does not break IME Composition (wait until it ends to calibrate value).
Introduce maskitoCompositionValidationPlugin => developer can use it to enable validation of intermediate value of composition event.

import {maskitoCompositionValidationPlugin, MaskitoOptions} from '@maskito/core';

export default {
    mask: /^[0-9๏ผ-๏ผ™]*$/,
    plugins: [maskitoCompositionValidationPlugin()],
} as MaskitoOptions;
nsbarsukov commented

What is better and more self-descriptive: maskitoCompositionValidationPlugin or maskitoStrictCompositionPlugin ? ๐Ÿค”