Некорректное отображение ошибок в Input и зависимых компонентах
penartur opened this issue · comments
Дано: сложная форма с большим числом полей, на некоторых полях - валидация введённого значения в родительских компонентах. Кнопка "отправить" деактивируется, если не все значения введены корректно.
Пользователь заполняет форму, одно из полей заполнено ошибочно. Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.
Пользователь изменяет введённое в это поле значение, новое поле тоже некорректно, новое сообщение об ошибке совпадает со старым. Пользователь убирает фокус с поля.
Ожидаемое поведение
Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.
Актуальное поведение
Кнопка "отправить" неактивна, ошибочно заполненное поле не подсвечено, сообщение об ошибке не отображается. Пользователю непонятно, почему именно кнопка "отправить" неактивна, что пошло не так, и как исправить ситуацию.
Возможное решение
В закрытом PR #871 - возможное решение проблемы.
Суть проблемы: компонент Input хранит в своём state поле error, которое обновляет, когда в props пришло новое значение error, отличное от предыдущего (метод componentDidUpdate).
С поведением по умолчанию, при onFocus на поле, значение error в state обнуляется (метод resetError). При onBlur, значение не возвращается.
Соответственно, если в процессе ввода нового значения текст приходящей снаружи ошибки изменился - она будет отображаться. Причём будет отображаться даже в процессе ввода.
Если в процессе ввода нового значения текст приходящей снаружи ошибки остался прежним (т.е. причина некорректности значения не изменилась) - она не будет отображаться. Причём не будет отображаться даже после ухода с поля.
Окружение
- Используемая версия библиотеки: 17.4.0
- Имя и версия браузера: Firefox 74.0
- Имя и версия ОС: Windows 10 1909
TL;dr, простой пример:
В поле можно ввести сумму до тысячи рублей. Пользователь вводит миллион - подсвечиваем поле ошибкой "слишком большая сумма", не даём отправить форму. Пользователь меняет миллион на сто тысяч - форму отправить не даём, но поле перестаёт подсвечиваться.