[BUG] @prizm-ui/components - PrizmInputComponent with NgxMaskDirective behaves incorrectly when changed from empty value

[AleksandrSibiakov]

Библиотека

Выберите нужное отметив галочку [x]

• @prizm-ui/core
• @prizm-ui/components
• @prizm-ui/install
• @prizm-ui/icons
• @prizm-ui/flag-icons
• @prizm-ui/theme
• @prizm-ui/charts
• @prizm-ui/ast
• @prizm-ui/nx-plugin

Компонент

PrizmInputComponent

Версия

➜ npm ls @prizm-ui/components

@prizm-ui/components 3.7.0

Воспроизведение проблемы

https://stackblitz.com/edit/prizm-v3-input-with-mask?file=src%2Fapp%2Fapp.component.html

Описание проблемы

Сценарий - ограничение символов в поле ввода (числовое, или произвольное)

Есть проблема следующего характера:

При изменении значения <input prizmInput mask="..."> с пустого на произвольное (т.е. первое изменение), это изменение

• не помечает поле как dirty
• при вводе недопустимого символа, этот символ попадает в модель (см. Case 2 со stackblitz выше)

Результаты исследования

Дебаг выявил, что проблема появляется после попадания в следующий вызов

Как видим, this.value получает значение 2 - значение из поля ввода, в то время как значение контрола еще не обновилось, это ведет к вызову ngControl.control.setValue на строчке

Prizm/libs/components/src/lib/components/input/input-text/input-text.component.ts

Line 272 in fe630b6

if (value !== this.ngControl?.value) this.ngControl?.control?.setValue(value);

тем самым обновляя значение formControl в обход стандартного потока значений - вызова колбэка зарегестрированного через registerOnChange.

Предлагаю:

• не использовать FormControl.setValue при апдейте значения в инпуте (и вообще) - это не верно, и такой функционал выходит за рамки данной директивы\компонента (предполагаю, что вызов updateHint является целью вызова updateValue - можно updateHint вызвать напрямую)

[AleksandrSibiakov]

Еще подумал (в тему корректности использования ngControl.setValue в компоненте) - а вы проверяете поведение на сетапах типа ngModelOptions="{ updateOn: 'blur' }" ?

Ведь в этом случае, к примеру при вызове InputTextComponent.clear (в котором тоже вызывается updateValue -> control.setValue), setValue апдейтит значение сразу, тогда как при нормальном потоке, через событие инпута на HTMLInputElement, или вызове зарегестрированного registerOnChange значение запишется только в ngControl._pendingValue и отправится в модель только по событию blur (а если точнее, после вызова зарегестрированного через CVA.registerOnTouched колбэка)

[AleksandrSibiakov]

Та же цепочка событий приводит к тому что валидаторы запускаются после первого символа, даже если явно указать updateOn: blur (нам нужно для ограничения кол-ва вызовов асинхронного валидатора).
Если надо, могу как отдельную проблему оформить, но суть та же - это из за вызова FormControl.setValue

[ZurabDev]

Та же цепочка событий приводит к тому что валидаторы запускаются после первого символа, даже если явно указать updateOn: blur (нам нужно для ограничения кол-ва вызовов асинхронного валидатора). Если надо, могу как отдельную проблему оформить, но суть та же - это из за вызова FormControl.setValue

Можешь оформить пожалуйста отдельно?