React: Ошибка: ввод minLength не работает после изменения типа

Созданный на 5 нояб. 2020  ·  3Комментарии  ·  Источник: facebook/react

У меня есть вход с типом пароля с minLength 8, и у меня есть переключатель, чтобы изменить тип на текст (переключатель пароля).
когда я набираю длину <8 и нажимаю "Отправить", это препятствует отправке. но когда я переключаю пароль, чтобы он менял тип на текст и отправлял форму, он может быть отправлен. кстати, я использую useRef ()

Версия React:
реагировать: ^ 17.0.1
реагировать-дом: ^ 17.0.1

Действия по воспроизведению

  1. введите символ <minLength
  2. представить форму
  3. переключить тип формы
  4. представить форму

Ссылка на пример кода: DEMO

Текущее поведение

Форма отправляется, даже если она находится под minLength

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

Форма не отправляется, когда она находится под minLength

Safari DOM Bug

Самый полезный комментарий

Спасибо, я могу воспроизвести это.

Как правило, любые проверки игнорируются, если входные данные нетронутые. Если вы отправляете форму, ничего не набирая, minLength игнорируется.

Safari правильно помечает форму как недопустимую, если вы ввели что-то, что не соответствует всем ограничениям. Однако, когда type изменяется, Safari, кажется, считает входные данные безупречными. Поэтому недопустимое значение отправляется, если type изменилось после завершения ввода.

Вопрос в том, может ли React исправить эту причуду или должен ли Safari исправить это.

Редактировать:
Минимальное воспроизведение без какой-либо реакции: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js

Если вам нужно такое поведение, я предлагаю зарегистрировать ошибку в Safari.

Все 3 Комментарий

Спасибо за отчет.

Я могу заметить две проблемы:

  1. в вашей демонстрации используется minLength="3" не 8.
    Ввод менее 8 символов - это нормально, если вы вводите более 2-х символов.
  2. minLength не поддерживается в IE 11: https://caniuse.com/input-minlength
    Я протестировал вашу демонстрацию в Chrome 85 и не смог отправить, если ввел менее 2 символов.
    Какой браузер вы использовали при тестировании кода?

Я использую mac os 10.14.6 и браузер Safari 13.0.5 (14608.5.12)
я что-то забыл, не вводите никаких символов после переключения

Кстати, когда я пытаюсь использовать Chrome 86.0.4240.183, он работает нормально. я думаю это бывает только в сафари

Шаги к воспроизведению 1

  1. введите символ <minLength
  2. представить форму
  3. переключить тип формы
  4. не вводите ничего после переключения
  5. представить форму
  6. форма будет отправлена

Шаги к воспроизведению 2

  1. введите символ <minLength
  2. представить форму
  3. переключить тип формы
  4. введите что-нибудь после переключения
  5. представить форму
  6. форма не будет отправлена

Спасибо, я могу воспроизвести это.

Как правило, любые проверки игнорируются, если входные данные нетронутые. Если вы отправляете форму, ничего не набирая, minLength игнорируется.

Safari правильно помечает форму как недопустимую, если вы ввели что-то, что не соответствует всем ограничениям. Однако, когда type изменяется, Safari, кажется, считает входные данные безупречными. Поэтому недопустимое значение отправляется, если type изменилось после завершения ввода.

Вопрос в том, может ли React исправить эту причуду или должен ли Safari исправить это.

Редактировать:
Минимальное воспроизведение без какой-либо реакции: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js

Если вам нужно такое поведение, я предлагаю зарегистрировать ошибку в Safari.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги