React: input type = range onChange deve disparar ao alterar o valor usando as teclas de seta do teclado

O Chrome não dispara o evento input quando um intervalo é modificado usando as teclas de seta, mas o Firefox sim.

O Chrome dispara um evento de 'mudança' quando você o altera com o teclado. É possível usar 'alterar' em vez de entrada?

No Chrome beta e no Firefox, 'change' não dispara ao arrastar até o mouseup, então devemos ouvir a entrada aqui também.

Fiz um JSFiddle para testar isso: http://jsfiddle.net/vqnMU/embedded/result/

O React parece estar escutando input e acionando input & change sempre que ocorre.

Focando o controle deslizante e pressionando para a direita:

| Navegador | Evento | React Event |
| --- | --- | --- |
| Chrome 34.0.1847.131 * | - || Mudar |
Chrome Canary | Entrada, mudança ||
| IE 10 | Mudar | - |

* _Firefox aciona change no blur_

Adicionalmente para arrastar:

| Navegador | Evento | React Event |
| --- | --- | --- |
| Chrome 34.0.1847.131 | Entrada * | Entrada, mudança |
| Safari 7.0.3 | Entrada, mudança | Entrada, mudança |
| Chrome Canary | Entrada * | Entrada, mudança |
| Firefox 29 | Entrada * | Entrada, mudança |
| IE 10 | Mudar | - |

* _Todos esses navegadores acionam change ao arrastar end_

Editar ChangeEventPlugin para escutar eventos de mudança em todos os tipos de entrada (35e7aa43f801f4836305ee25800988ce52003767) parece corrigir a mudança e manipulação de evento de entrada do React para todos os navegadores acima. Devo fazer uma solicitação de pull ou há um motivo para o plug-in estar apenas ouvindo change eventos nas entradas de arquivo que estou faltando?

Acabei de ter esse problema ao tentar portar um widget que preciso reagir.
Alguém no núcleo pode dar algum feedback sobre se a sugestão de @eddhannay funcionaria / não funcionaria? Obrigado :)

@locks Eu recomendaria implementar o seu próprio, parece que todos os elementos de entrada HTML vêm com um monte de inconsistências que podem ser difíceis de normalizar e basicamente não têm estilo.

@syranide Acho que devemos tentar oferecer suporte a todas as entradas integradas pelo menos de forma razoável.

@spicyj Certamente! Mas existem muitas coisas estranhas que não podemos consertar ... como não ser capaz de ler o valor de type="number" se não for estritamente numérico, etc.

+1

Qualquer solução alternativa para o IE10 + conseguir reagir para disparar um sintetizador onChange, em um navegador onchange para entradas de alcance

+1 para entrada no IE10 + acionando onChange

+1 para todos os +1

alguma novidade? a entrada de faixa ainda está quebrada no IE 11.
Funciona muito bem no Edge, no entanto.

1 para que isso seja aplicado. Não funciona para mim mesmo no Edge

Não funciona no IE 11.

+1

Pelo que vale a pena, eu criei um componente alternativo enquanto isso é resolvido no núcleo: https://github.com/mapbox/react-range

+1, adoro o trabalho que todos estão fazendo em react, mas sinto que este bug deve ser uma prioridade mais alta para corrigir, visto que estamos nos aproximando da marca de 2 anos de sua descoberta.

@dancoates Lamento que esta seja uma prioridade menor para nós do que para você. Sinta-se à vontade para enviar uma solicitação de pull! ChangeEventPlugin é um pouco cabeludo, mas minha postagem do blog em http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html deve dar uma ideia da estratégia geral. Para elementos de intervalo, devemos ouvir os eventos de entrada e de mudança e disparar eventos quando um deles acontecer (mas apenas uma vez, mesmo se ambos acontecerem).

Não precisa se desculpar, eu sei que é complicado. Vou dar uma olhada em ChangeEventPlugin e ver se posso ajudar.
Talvez uma seção de advertências nos documentos ajude as pessoas a se perguntarem por que as mudanças não estão sendo acionadas. Embora eu ache que este tópico seja fácil de encontrar.

: +1: adoraria ver isso corrigido!

Como lidei com o problema por enquanto
Para meu uso, eu simplesmente adicionei o mesmo evento em um evento onMouseUp e ele funciona para todos os IE 10 e superiores e Edge.

Não dá exatamente o mesmo resultado porque o valor só é alterado no evento mouseup , mas acho (pelo menos no meu caso) que se degrada lindamente.

Eu também corri para isso e adoraria ver corrigido.

Obrigado pelas sugestões de soluções alternativas. Adicionar um evento "onClick" ou "onMouseup" foi muito útil, mas ainda não é o ideal que nada aconteça até que o usuário saia do controle deslizante.

Confira esta em StackOverflow que explica uma maneira de atualizações de endereço ficando enquanto o usuário está arrastando ...

Por que está fechado? Isso ainda é um problema - onChange não é acionado no IE11 em nossos testes. Forçado a usar https://github.com/mapbox/react-range

Estamos usando 15.3.2 e enfrentando esse problema. Olhando para as notas de lançamento dos três lançamentos menores desde então, não vejo que isso tenha sido corrigido. Por que está fechado? O problema https://github.com/facebook/react/issues/8168 parece ser o caso de rastreamento para ele, mas parece que esse problema tem uma descrição muito mais completa do problema.

Se você olhar o histórico acima, verá que o problema foi resolvido por # 5746.
Se você abrir este PR, verá que seu marco está definido como 16.

Portanto, a correção estará em 16 e não podemos colocá-la em 15.x porque introduz uma mudança significativa no comportamento.

Não sei se é possível retroceder para 15.x. @jquense e @nhunzaker provavelmente seriam capazes de responder a isso.

É possível! Existe até um PR :) já # 8575

Ah legal. Você pode fazer uma lista dos PRs do DOM que estão aguardando revisão?
Em seguida, adicione-os ao guarda-chuva em # 8583 para que os casos relevantes tenham testes manuais.

https://github.com/facebook/react/pull/8575 está na minha lista de tarefas. Só preciso testar algumas coisas localmente e então acho que iremos 👍 para fundir. Certificarei-me de adicionar alguns casos relevantes ao # 8583 quando tiver a oportunidade de analisá-lo

Alguém está trabalhando em um dispositivo de teste de navegador para isso? Se não, tenho tempo para escrever um.

Eu estava planejando, mas ainda não tive um momento. sinta-se livre para pular

Não se preocupe. Existem muitos outros casos de teste para escrever. Eu tenho um PR relacionado a https://github.com/facebook/react/issues/8308. Vou mudar de direção para isso.

Eu encontrei esse problema hoje no meu Windows phone. Ele não chama o método especificado em onChange. Quando a correção será aplicada?

Isso foi lançado em 15.6.x.