If 1701 masked input fixes

[lossir]

Баги от лица пользователя описаны в задаче IF-1701¹. Всего их 6.
Здесь описаны технические проблемы, которые вызывали эти баги.

Проблема 1

Старый код, отвечающий за подсветку маски.
Плюс его в поддержке IE11 и старых версий других браузеров.
Минусы - сложность; влияние на вёрстку; специфичное тестирование.

Проблема 2

Использование setTimeout для обработки события onUnexpectedInput.

---

Решение 1

После отказа от поддержки IE11, эту логику получилось сделать "проще", хоть и многословнее.
Новый код минимально влияет на вёрстку, благодаря чему MaskedInput тестируется как обычный Input.

Всё работает с помощью градиента и стилей background-clip² и -webkit-text-fill-color³.

Также символ подчеркивания снова реализовали через специальный шрифт, как это было в старых версиях пакета.
Но теперь шрифт лежит на сервере статики, что позволило избежать сложностей, которые он создавал раньше⁴.

Решение 2

setTimeout удалось заменить на синхронный код.

Ссылки

Песочница с новыми стялими
https://codepen.io/lossir/pen/ExrewOx

Чек-лист перед запросом ревью

1. Добавлены тесты на все изменения
   ⬜ unit-тесты для логики
   ⬜ скриншоты для верстки и кросс-браузерности
   ⬜ нерелевантно

2. Добавлена (обновлена) документация
   ⬜ styleguidist для пропов и примеров использования компонентов
   ⬜ jsdoc для утилит и хелперов
   ⬜ комментарии для неочевидных мест в коде
   ⬜ прочие инструкции (README.md, contributing.md и др.)
   ⬜ нерелевантно

3. Изменения корректно типизированы
   ⬜ без использования any (см. PR 2856)
   ⬜ нерелевантно

4. Прочее
   ⬜ все тесты и линтеры на CI проходят
   ⬜ в коде нет лишних изменений
   ⬜ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

Footnotes

1. https://yt.skbkontur.ru/issue/IF-1701 ↩

2. https://caniuse.com/background-clip-text ↩

3. https://caniuse.com/mdn-css_properties_-webkit-text-fill-color ↩

4. https://github.com/skbkontur/retail-ui/issues/2181 ↩