Skip to content

Некорректное отображение ошибок в Input и зависимых компонентах #1119

Open
penartur opened this issue Mar 31, 2020 · 0 comments

Comments

@penartur
Copy link

penartur commented Mar 31, 2020

Дано: сложная форма с большим числом полей, на некоторых полях - валидация введённого значения в родительских компонентах. Кнопка "отправить" деактивируется, если не все значения введены корректно.

Пользователь заполняет форму, одно из полей заполнено ошибочно. Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.

Пользователь изменяет введённое в это поле значение, новое поле тоже некорректно, новое сообщение об ошибке совпадает со старым. Пользователь убирает фокус с поля.

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

Кнопка "отправить" неактивна, ошибочно заполненное поле подсвечено, отображается сообщение об ошибке.

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

Кнопка "отправить" неактивна, ошибочно заполненное поле не подсвечено, сообщение об ошибке не отображается. Пользователю непонятно, почему именно кнопка "отправить" неактивна, что пошло не так, и как исправить ситуацию.

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

В закрытом PR #871 - возможное решение проблемы.

Суть проблемы: компонент Input хранит в своём state поле error, которое обновляет, когда в props пришло новое значение error, отличное от предыдущего (метод componentDidUpdate).

С поведением по умолчанию, при onFocus на поле, значение error в state обнуляется (метод resetError). При onBlur, значение не возвращается.

Соответственно, если в процессе ввода нового значения текст приходящей снаружи ошибки изменился - она будет отображаться. Причём будет отображаться даже в процессе ввода.
Если в процессе ввода нового значения текст приходящей снаружи ошибки остался прежним (т.е. причина некорректности значения не изменилась) - она не будет отображаться. Причём не будет отображаться даже после ухода с поля.

Окружение

  • Используемая версия библиотеки: 17.4.0
  • Имя и версия браузера: Firefox 74.0
  • Имя и версия ОС: Windows 10 1909

TL;dr, простой пример:
В поле можно ввести сумму до тысячи рублей. Пользователь вводит миллион - подсвечиваем поле ошибкой "слишком большая сумма", не даём отправить форму. Пользователь меняет миллион на сто тысяч - форму отправить не даём, но поле перестаёт подсвечиваться.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant