React: tipo de entrada = rango onChange debería dispararse al cambiar el valor usando las teclas de flecha del teclado

Chrome no activa el evento input cuando se modifica un rango con las teclas de flecha, pero Firefox sí.

Chrome dispara un evento de 'cambio' cuando lo cambia con el teclado. ¿Es posible usar 'cambiar' en lugar de entrada?

En Chrome beta y Firefox, 'cambiar' no se activa al arrastrar hasta que el mouse está arriba, por lo que también debemos escuchar la entrada aquí.

Hice un JSFiddle para probar esto: http://jsfiddle.net/vqnMU/embedded/result/

React parece estar escuchando input , y activando input & change cada vez que ocurre.

Enfocando el control deslizante y presionando hacia la derecha:

| Navegador | Evento | Reaccionar evento |
| --- | --- | --- |
| Chrome 34.0.1847.131 * | - || Cambiar |
Chrome Canary | Entrada, Cambio ||
| IE 10 | Cambiar | - |

* _Firefox activa change en desenfoque_

Además para arrastrar:

| Navegador | Evento | Reaccionar evento |
| --- | --- | --- |
| Chrome 34.0.1847.131 | Entrada * | Entrada, Cambio |
| Safari 7.0.3 | Entrada, Cambio | Entrada, Cambio |
| Chrome Canary | Entrada * | Entrada, Cambio |
| Firefox 29 | Entrada * | Entrada, Cambio |
| IE 10 | Cambiar | - |

* _Estos navegadores activan change al arrastrar end_

La edición de ChangeEventPlugin para escuchar los eventos de cambio en todos los tipos de entrada (35e7aa43f801f4836305ee25800988ce52003767) parece corregir el manejo de eventos de entrada y cambio de React para todos los navegadores anteriores. ¿Debo hacer una solicitud de extracción, o hay alguna razón por la que el complemento solo escuchaba eventos change en las entradas de archivo que me faltan?

Me encontré con este problema al intentar portar un widget que tengo que reaccionar.
¿Alguien en el núcleo puede dar algún comentario sobre si la sugerencia de @eddhannay funcionaría o no funcionaría? Gracias :)

@locks Recomendaría implementar el tuyo propio, parece que todos los elementos de entrada HTML vienen con un montón de inconsistencias que pueden ser difíciles de normalizar y que básicamente no tienen estilo.

@syranide Creo que deberíamos intentar admitir todas las entradas integradas al menos en su mayoría, de manera razonable.

@spicyj ¡Ciertamente! Pero hay muchas cosas raras que no podemos arreglar ... como no poder leer el valor de type="number" si no es estrictamente numérico, etc.

+1

Cualquier solución para que IE10 + reaccione para disparar un sintetizador onChange, en un navegador onchange para entradas de rango

+1 para entrada en IE10 + disparando onChange

+1 a todos los +1

¿hay noticias? La entrada de rango todavía está rota en IE 11.
Sin embargo, funciona muy bien en Edge.

+1 para que esto se aplique. No me funciona incluso en Edge

No funciona en IE 11.

+1

Por lo que vale, creé un componente alternativo mientras esto se resuelve en el núcleo: https://github.com/mapbox/react-range

+1, Amo el trabajo que todos están haciendo en Reaccionar, pero siento que este error debería ser una prioridad más alta para corregir, ya que nos acercamos a los 2 años desde su descubrimiento.

@dancoates Lamento que esta sea una prioridad menor para nosotros que para ti. ¡No dude en enviar una solicitud de extracción! ChangeEventPlugin es un poco peludo, pero mi publicación de blog en http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html debería darle una idea de la estrategia general. Para los elementos de rango, deberíamos escuchar tanto los eventos de entrada como los de cambio y los eventos de disparo cuando ocurra cualquiera de los dos (pero solo una vez, incluso si ambos ocurren).

No hay necesidad de lamentarlo, me doy cuenta de que es complicado. Echaré un vistazo a ChangeEventPlugin y veré si puedo ayudar.
Quizás una sección de advertencias en los documentos ayudaría a las personas a preguntarse por qué los cambios no se activan. Aunque supongo que este hilo es bastante fácil de encontrar.

: +1: me encantaría ver esto arreglado!

Cómo lidié con el problema por ahora
Para mi uso, simplemente agregué el mismo evento en un evento onMouseUp y funciona para todos los IE 10 y superiores y Edge.

No da exactamente el mismo resultado porque el valor solo se cambia en el evento mouseup pero creo (en mi caso de todos modos) que se degrada maravillosamente.

También me encontré con esto y me encantaría verlo arreglado.

Gracias por las sugerencias de soluciones. Agregar un evento "onClick" o "onMouseup" fue muy útil, pero aún no es óptimo que no ocurra nada hasta que el usuario abandone el control deslizante.

Consulte esto en StackOverflow, que explica una forma de abordar la obtención de actualizaciones mientras el usuario arrastra ...

¿Por qué esta cerrado? Esto sigue siendo un problema: onChange no se activa en absoluto en IE11 en nuestras pruebas. Obligado a usar https://github.com/mapbox/react-range

Estamos usando 15.3.2 y estamos experimentando este problema. Mirando las notas de la versión de las tres versiones menores desde entonces, no veo que esto se haya solucionado. ¿Por qué está cerrado? El problema https://github.com/facebook/react/issues/8168 parece ser el caso de seguimiento, pero parece que este problema tiene una descripción mucho más completa del problema.

Si observa el historial anterior, verá que el problema fue cerrado por # 5746.
Si abre este PR, verá que su hito está establecido en 16.

Entonces, la solución estará en 16, y no podemos ponerla en 15.x porque introduce un cambio radical en el comportamiento.

No sé si es posible exportarlo a 15.x. @jquense y @nhunzaker probablemente podrían responder a esto.

¡Es posible! Incluso hay un PR :) ya # 8575

Oh bien. ¿Puedes hacer una lista de DOM PR que están esperando a ser revisados?
Luego agréguelos al paraguas en # 8583 para que los casos relevantes tengan pruebas manuales.

https://github.com/facebook/react/pull/8575 está en mi lista de tareas pendientes. Solo necesito probar algunas cosas localmente y luego creo que estaremos 👍 para fusionarnos. Me aseguraré de agregar algunos casos relevantes al # 8583 cuando tenga la oportunidad de revisarlo

¿Alguien está trabajando en un dispositivo de prueba de navegador para esto? Si no, tengo algo de tiempo para escribir uno.

Lo estaba planeando, pero todavía no he tenido un momento. siéntete libre de saltar

Sin preocupaciones. Hay muchos otros casos de prueba para escribir. Tengo un PR relacionado con https://github.com/facebook/react/issues/8308. Cambiaré de tema a eso.

Encontré este problema hoy en mi teléfono con Windows. No llama al método que especifiqué en onChange. ¿Cuándo se aplicará la solución?

Esto se ha publicado en 15.6.x.