React: Para entrada controlada, a etapa não funciona conforme o esperado, a menos que seja inicializada com nulo ou "".

Criado em 6 mar. 2018 · 6Comentários · Fonte: facebook/react

ERRO

Qual é o comportamento atual?
Para input type = "number", a etapa não funciona como esperado se houver um valor inicial definido. A etapa só parece ser respeitada se o valor inicial for "" ou nulo.

Exemplo:
https://codepen.io/anon/pen/MQMBmX

O exemplo usa um valor e etapa de ligação de entrada controlada. O passo é 1/10 do valor. Se você editar o valor na caixa de texto para 50000 e incrementar usando o stepper, ele aumentará para 50100 (ou seja, pelo valor inicial e não pelo passo atual).

Edite o código para que o valor inicial seja "" ou nulo. Edite a caixa de texto para 50000 e aumente - o valor vai para 55000 conforme o esperado.

Qual é o comportamento esperado?
Deve ser possível renderizar uma entrada de número que honra o passo sem ter que inicializar o valor do componente de entrada para nulo ou "" primeiro.

Parece que, quando há um valor inicial fornecido, ele gravará um atributo de valor no DOM (por exemplo, valor = "100"). Quando o valor inicial é "" ou nulo, apenas o atributo de valor é gravado no DOM sem atribuição. por exemplo (valor).

Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?

16.3.0-alpha.1 (transferido para esta versão para confirmar se ainda é um problema)
0.14.7 (originalmente encontrado nesta versão)

Parece afetar apenas o Chrome (confirmado para Windows e Mac, versões 59 e 64). Bug não aparece no Safari (pelo menos em um mac).

DOM Bug

Fonte

andyboyne

Comentários muito úteis

Sim. Na verdade, eu me pergunto se devemos fazer um cronograma juntos sobre isso.

nhunzaker em 28 mar. 2018

👍3

Todos 6 comentários

Estou vendo um comportamento muito particular com esse violino no Chrome 64 no Windows 10 e no Firefox 52 no Debian. Se eu digitar 50000 na entrada e clicar imediatamente na seta para cima, obtenho 50100. Se eu digitar 50000 na entrada, clique em outro lugar no documento e, em seguida, clique na seta para cima, obtenho 55000.

nmain em 6 mar. 2018

Você não precisa alterar o valor, clique na seta para cima várias vezes e ele começa a mudar para números que não fazem sentido.

jmz7v em 12 mar. 2018

Obrigado pelo relatório @andyboyne. O problema decorre do fato de que não atualizamos o atributo value nas entradas de números até que o campo fique desfocado. Fazemos isso para evitar muitos comportamentos indesejados relacionados à validação do navegador. cc @nhunzaker.

Isso deve ser resolvido quando finalmente pararmos de sincronizar o atributo value para entradas controladas https://github.com/facebook/react/issues/11896.

aweary em 28 mar. 2018

Sim. Na verdade, eu me pergunto se devemos fazer um cronograma juntos sobre isso.

nhunzaker em 28 mar. 2018

👍3

Como já foi mencionado, é um problema de sincronização, o campo está sincronizado quando o campo está desfocado.
Então, adicionei algum console.log e descobri que e.target.value e e.target.getAttribute ("value") não estão sincronizados enquanto o campo não está desfocado.
Portanto, uma solução alternativa é adicionar e.target.setAttribute ("value", e.target.value); para forçar a atualização desse valor e, em seguida, ele funciona conforme o esperado.

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}