MoneyInput value перекрывает currency

[Ilya Bayaliyev]

value перекрывает значок currency при передаче неотформатированной строки.

Ожидаемое поведение

Ожидается, что при передаче строки '1230111' она будет форматироваться в '1 230 111' до момента расчета отступа currencySymbol

Актуальное поведение

Возможно расчет отступа производится до форматирования value из '1230111' в '1 230 111'

Шаги для воспроизведения

создать локальную переменную value
onChange привязать к хэндлеру, который будет убирать пробелы из value
Перекрытие появляется при введении числа больше 4 символов в длину

Пример:

function SalaryInput () {
   const [value, setValue] = useState('');
   const changeHandler = (newValue) => setValue(value.replace(/ /g, ''));
   return <MoneyInput value={value} onChange={changeHandler} />
}

Возможное решение

Нужно сначала трансформировать value из '1230111' в '1 230 111', а затем брать его length и рассчитывать отступ для иконки валюты.

Текущее решение реализованное мной в проекте, это форматирование value '1230111' => '1 230 111' до отправки его в MoneyInput

Окружение

• Используемая версия библиотеки: 16.0.3
• Имя и версия браузера: Google Chrome 86.0.4240.183 (Официальная сборка), (64 бит)
• Имя и версия ОС: Windows 10

[Ilya Bayaliyev]

Обновил до последней версии, бага нет