React: input type = range onChange doit se déclencher lors de la modification de la valeur à l'aide des touches fléchées du clavier

Chrome ne déclenche pas l'événement input lorsqu'une plage est modifiée à l'aide des touches fléchées, contrairement à Firefox.

Chrome déclenche un événement «modification» lorsque vous le modifiez avec le clavier. Est-il possible d'utiliser «changer» au lieu de l'entrée?

Dans la version bêta de Chrome et Firefox, «change» ne se déclenche pas lorsque vous faites glisser jusqu'à ce que la souris soit levée, nous devrions donc écouter les entrées ici aussi.

J'ai fait un JSFiddle pour tester ceci: http://jsfiddle.net/vqnMU/embedded/result/

React semble écouter input et déclencher input & change chaque fois que cela se produit.

Mise au point du curseur et pression à droite:

| Navigateur | Événement | Réagir à l'événement |
| --- | --- | --- |
| Chrome 34.0.1847.131 * | - || Changer |
Chrome Canary | Entrée, changement ||
| IE 10 | Changer | - |

* _Firefox déclenche change sur le flou_

De plus pour faire glisser:

| Navigateur | Événement | Réagir à l'événement |
| --- | --- | --- |
| Chrome 34.0.1847.131 | Entrée * | Entrée, changement |
| Safari 7.0.3 | Entrée, changement | Entrée, changement |
| Chrome Canary | Entrée * | Entrée, changement |
| Firefox 29 | Entrée * | Entrée, changement |
| IE 10 | Changer | - |

* _Ces navigateurs déclenchent tous change sur glisser end_

La modification de ChangeEventPlugin pour écouter les événements de modification sur tous les types d'entrée (35e7aa43f801f4836305ee25800988ce52003767) semble corriger la gestion des événements de modification et d'entrée de React pour tous les navigateurs ci-dessus. Dois-je faire une pull request, ou y a-t-il une raison pour laquelle le plugin n'écoutait que les événements change sur les entrées de fichier qui me manquent?

Je viens de rencontrer ce problème en essayant de porter un widget que je dois réagir.
Quelqu'un dans le noyau peut-il donner des commentaires sur la question de savoir si la suggestion de @eddhannay fonctionnerait / ne fonctionnerait pas? Merci :)

@locks Je recommanderais d'implémenter le vôtre, il semble que tous les éléments d'entrée HTML soient livrés avec un tas d'incohérences qui peuvent être difficiles à normaliser et qui sont fondamentalement unstyle: capable.

@syranide Je pense que nous devrions essayer de prendre en charge toutes les entrées intégrées au moins la plupart du temps raisonnablement.

@spicyj Certainement! Mais il y a beaucoup de choses bizarres que nous ne pouvons pas corriger ... comme ne pas pouvoir lire la valeur de type="number" si ce n'est pas strictement numérique, etc.

+1

Toute solution de contournement pour IE10 + pour obtenir la réaction de déclencher un synthé sur Change, sur un navigateur onchange pour les entrées de plage

+1 pour entrée sur IE10 + déclenchement sur

+1 à tous les +1

des nouvelles? l'entrée de gamme est toujours interrompue dans IE 11.
Fonctionne très bien sur Edge, cependant.

+1 pour que cela soit appliqué. Cela ne fonctionne pas pour moi même sur Edge

Ne fonctionne pas dans IE 11.

+1

Pour ce que ça vaut, j'ai créé un composant de travail pendant que cela est élaboré dans le noyau: https://github.com/mapbox/react-range

+1, J'adore le travail que tout le monde fait sur réagir, mais je pense que ce bogue devrait être une priorité plus élevée à corriger vu que nous approchons de la marque de 2 ans après sa découverte.

@dancoates Je suis désolé que ce soit une priorité moins élevée pour nous que pour vous. N'hésitez pas à envoyer une pull request! ChangeEventPlugin est un peu poilu mais mon article de blog à http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html devrait vous donner une idée de la stratégie générale. Pour les éléments de plage, nous devrions écouter à la fois les événements d'entrée et de changement et les événements de déclenchement lorsque l'un ou l'autre se produit (mais une seule fois même si les deux se produisent).

Pas besoin d'être désolé, je me rends compte que c'est une question délicate. Je vais jeter un oeil à ChangeEventPlugin et voir si je peux vous aider.
Peut-être qu'une section de mise en garde dans la documentation aiderait les gens à se demander pourquoi les changements ne se déclenchent pas? Bien que je suppose que ce fil est assez facile à trouver.

: +1: aimerait voir cela corrigé!

Comment j'ai géré le problème pour l'instant
Pour mon utilisation, j'ai simplement ajouté le même événement sur un événement onMouseUp et cela fonctionne pour tous les IE 10 et plus et Edge.

Cela ne donne pas exactement le même résultat car la valeur n'est modifiée que sur l'événement mouseup mais je pense (pour mon cas en tout cas) qu'il se dégrade magnifiquement.

J'ai aussi rencontré ce problème et j'aimerais le voir corrigé.

Merci pour les suggestions de solutions de contournement. L'ajout d'un événement "onClick" ou "onMouseup" a été très utile, mais il est toujours sous-optimal que rien ne se passe jusqu'à ce que l'utilisateur quitte le curseur.

Découvrez ceci sur StackOverflow qui explique un moyen de gérer les mises à jour pendant que l'utilisateur fait glisser ...

Pourquoi est-ce fermé? C'est toujours un problème - onChange ne se déclenche pas du tout dans IE11 lors de nos tests. Obligé d'utiliser https://github.com/mapbox/react-range

Nous utilisons 15.3.2 et rencontrons ce problème. En regardant les notes de publication des trois versions mineures depuis lors, je ne vois pas que cela a été corrigé. Pourquoi est-il fermé? Le problème https://github.com/facebook/react/issues/8168 semble être le cas de suivi, mais il semble que ce problème ait une description beaucoup plus approfondie du problème.

Si vous regardez l'historique ci-dessus, vous verrez que le problème a été résolu par # 5746.
Si vous ouvrez ce PR, vous verrez que son jalon est fixé à 16.

Le correctif sera donc en 16, et nous ne pouvons pas le mettre en 15.x car il introduit un changement radical de comportement.

Je ne sais pas s'il est possible de le rétroporter vers 15.x. @jquense et @nhunzaker pourraient probablement répondre à cela.

C'est possible! Il y a même un PR :) déjà # 8575

Oh sympa. Pouvez-vous faire une liste des PR DOM qui attendent leur examen?
Ensuite, ajoutez-les au parapluie dans # 8583 afin que les cas pertinents aient des tests manuels.

https://github.com/facebook/react/pull/8575 est sur ma liste de choses à faire. Juste besoin de tester des trucs localement et ensuite je pense que nous serons 👍 pour fusionner. Je veillerai à ajouter quelques cas pertinents au n ° 8583 lorsque j'aurai l'occasion de l'examiner

Quelqu'un travaille-t-il sur un appareil de test de navigateur pour cela? Sinon, j'ai le temps d'en rédiger un.

J'avais prévu cela mais je n'ai pas encore eu un moment. n'hésitez pas à sauter dans

Pas de soucis. Il y a beaucoup d'autres cas de test à rédiger. J'ai un PR lié à https://github.com/facebook/react/issues/8308. Je vais passer à ça.

J'ai rencontré ce problème aujourd'hui sur mon téléphone Windows. Il n'appelle pas la méthode que j'ai spécifiée dans onChange. Quand le correctif sera-t-il appliqué?

Cela a été publié dans 15.6.x.