React: Bug: a entrada minLength não funciona após a alteração do tipo
Eu tenho uma entrada com o tipo de senha com minLength 8 e tenho um botão para alterar o tipo para texto (alternar senha).
quando eu digito com comprimento <8 e pressiono enviar, impede o envio. mas, quando eu alterno a senha para alterar o tipo para texto e enviar o formulário, ele pode ser enviado. btw i using useRef ()
Versão React:
reagir: ^ 17.0.1
react-dom: ^ 17.0.1
Passos para reproduzir
- tipo de caractere <minLength
- Enviar formulário
- alternar o tipo de formulário
- Enviar formulário
Link para o exemplo de código: DEMO
O comportamento atual
O formulário é enviado mesmo quando está sob minLength
O comportamento esperado
O formulário não é enviado quando está sob minLength
Vandoct
Todos 3 comentários
Obrigado pelo relatório.
Posso identificar dois problemas:
- sua demonstração usa
minLength="3"não 8.
É bom digitar menos de 8 caracteres, desde que você digite mais de 2 minLengthnão é compatível com o IE 11: https://caniuse.com/input-minlength
Testei sua demonstração no Chrome 85 e não consegui enviar quando inseri menos de 2 caracteres.
Qual navegador você estava usando ao testar seu código?
eps1lon
em 5 nov. 2020
Estou usando o mac os 10.14.6 e o navegador Safari 13.0.5 (14608.5.12)
esqueci algo, não digite nenhum caractere depois de alternar
A propósito, quando tento com o Chrome 86.0.4240.183, ele funciona bem. eu acho que isso acontece apenas no safari
Passos para reproduzir 1
- tipo de caractere <minLength
- Enviar formulário
- alternar o tipo de formulário
- não digite nada depois de alternar
- Enviar formulário
- o formulário será enviado
Passos para reproduzir 2
- tipo de caractere <minLength
- Enviar formulário
- alternar o tipo de formulário
- digite qualquer coisa depois de alternar
- Enviar formulário
- o formulário não será enviado
Vandoct
em 5 nov. 2020
Obrigado, posso reproduzir isso.
Geralmente, qualquer validação é ignorada se a entrada for pura. Se você enviar o formulário sem digitar nada, minLength será ignorado.
O Safari marca corretamente o formulário como inválido se você digitou algo que não passa em todas as restrições. No entanto, quando o type muda, o Safari parece considerar a entrada intocada. Portanto, um valor inválido é enviado se type mudou após a digitação ser concluída.
A questão é se o React pode ou deve consertar essa peculiaridade ou se o Safari deve consertar.
Editar:
Reprodução mínima sem qualquer reação: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Se você precisar desse comportamento, sugiro registrar um bug no Safari.
eps1lon
em 5 nov. 2020
Questões relacionadas
UnbearableBear
·
3Comentários
MoOx
·
3Comentários
huxiaoqi567
·
3Comentários
framerate
·
3Comentários
krave1986
·
3Comentários
Comentários muito úteis
Obrigado, posso reproduzir isso.
Geralmente, qualquer validação é ignorada se a entrada for pura. Se você enviar o formulário sem digitar nada,
minLengthserá ignorado.O Safari marca corretamente o formulário como inválido se você digitou algo que não passa em todas as restrições. No entanto, quando o
typemuda, o Safari parece considerar a entrada intocada. Portanto, um valor inválido é enviado setypemudou após a digitação ser concluída.A questão é se o React pode ou deve consertar essa peculiaridade ou se o Safari deve consertar.
Editar:
Reprodução mínima sem qualquer reação: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Se você precisar desse comportamento, sugiro registrar um bug no Safari.