You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Дано: сложная форма с большим числом полей, на некоторых полях - валидация введённого значения в родительских компонентах. Кнопка "отправить" деактивируется, если не все значения введены корректно.
Пользователь заполняет форму, одно из полей заполнено ошибочно. Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.
Пользователь изменяет введённое в это поле значение, новое поле тоже некорректно, новое сообщение об ошибке совпадает со старым. Пользователь убирает фокус с поля.
Ожидаемое поведение
Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.
Актуальное поведение
Кнопка "отправить" неактивна, ошибочно заполненное поле не подсвечено, сообщение об ошибке не отображается. Пользователю непонятно, почему именно кнопка "отправить" неактивна, что пошло не так, и как исправить ситуацию.
Суть проблемы: компонент Input хранит в своём state поле error, которое обновляет, когда в props пришло новое значение error, отличное от предыдущего (метод componentDidUpdate).
С поведением по умолчанию, при onFocus на поле, значение error в state обнуляется (метод resetError). При onBlur, значение не возвращается.
Соответственно, если в процессе ввода нового значения текст приходящей снаружи ошибки изменился - она будет отображаться. Причём будет отображаться даже в процессе ввода.
Если в процессе ввода нового значения текст приходящей снаружи ошибки остался прежним (т.е. причина некорректности значения не изменилась) - она не будет отображаться. Причём не будет отображаться даже после ухода с поля.
Окружение
Используемая версия библиотеки: 17.4.0
Имя и версия браузера: Firefox 74.0
Имя и версия ОС: Windows 10 1909
TL;dr, простой пример:
В поле можно ввести сумму до тысячи рублей. Пользователь вводит миллион - подсвечиваем поле ошибкой "слишком большая сумма", не даём отправить форму. Пользователь меняет миллион на сто тысяч - форму отправить не даём, но поле перестаёт подсвечиваться.
The text was updated successfully, but these errors were encountered:
Дано: сложная форма с большим числом полей, на некоторых полях - валидация введённого значения в родительских компонентах. Кнопка "отправить" деактивируется, если не все значения введены корректно.
Пользователь заполняет форму, одно из полей заполнено ошибочно. Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.
Пользователь изменяет введённое в это поле значение, новое поле тоже некорректно, новое сообщение об ошибке совпадает со старым. Пользователь убирает фокус с поля.
Ожидаемое поведение
Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.
Актуальное поведение
Кнопка "отправить" неактивна, ошибочно заполненное поле не подсвечено, сообщение об ошибке не отображается. Пользователю непонятно, почему именно кнопка "отправить" неактивна, что пошло не так, и как исправить ситуацию.
Возможное решение
В закрытом PR #871 - возможное решение проблемы.
Суть проблемы: компонент
Input
хранит в своёмstate
полеerror
, которое обновляет, когда вprops
пришло новое значениеerror
, отличное от предыдущего (методcomponentDidUpdate
).С поведением по умолчанию, при
onFocus
на поле, значениеerror
вstate
обнуляется (методresetError
). ПриonBlur
, значение не возвращается.Соответственно, если в процессе ввода нового значения текст приходящей снаружи ошибки изменился - она будет отображаться. Причём будет отображаться даже в процессе ввода.
Если в процессе ввода нового значения текст приходящей снаружи ошибки остался прежним (т.е. причина некорректности значения не изменилась) - она не будет отображаться. Причём не будет отображаться даже после ухода с поля.
Окружение
TL;dr, простой пример:
В поле можно ввести сумму до тысячи рублей. Пользователь вводит миллион - подсвечиваем поле ошибкой "слишком большая сумма", не даём отправить форму. Пользователь меняет миллион на сто тысяч - форму отправить не даём, но поле перестаёт подсвечиваться.
The text was updated successfully, but these errors were encountered: