input type=range onChange should fire when changing the value using the keyboard arrow keys #554

subtleGradient · Nov 17, 2013

No description provided.

Chrome doesn't fire the input event when a range is modified using arrow keys, but Firefox does.

sophiebits · Nov 17, 2013

Chrome doesn't fire the input event when a range is modified using arrow keys, but Firefox does.

Chrome fires a 'change' event when you change it with keyboard. Possible to use 'change' instead of input?

jessep · Jan 15, 2014

Chrome fires a 'change' event when you change it with keyboard. Possible to use 'change' instead of input?

In Chrome beta and Firefox, 'change' doesn't fire when dragging until mouseup so we should listen to input here too.

sophiebits · Mar 11, 2014

In Chrome beta and Firefox, 'change' doesn't fire when dragging until mouseup so we should listen to input here too.

I made a JSFiddle to test this: http://jsfiddle.net/vqnMU/embedded/result/

React seems to be listening for input, and triggering input & change whenever it occurs.

Focusing the slider and pressing right:

Browser	Event	React Event
Chrome 34.0.1847.131**	Change	-
Safari 7.0.3	Change	-
Chrome Canary	Input, Change	Input, Change
Firefox 29*	Input	Input, Change
IE 10	Change	-

* Firefox triggers change on blur

Additionally for dragging:

Browser	Event	React Event
Chrome 34.0.1847.131	Input*	Input, Change
Safari 7.0.3	Input, Change	Input, Change
Chrome Canary	Input*	Input, Change
Firefox 29	Input*	Input, Change
IE 10	Change	-

* These browsers all trigger change on drag end

Editing ChangeEventPlugin to listen for change events on all input types (35e7aa4) appears to fix React's change & input event handling for all of the above browsers. Should I make a pull request, or is there a reason that the plugin was only listening for change events on file inputs that I'm missing?

eddhannay · May 3, 2014

I made a JSFiddle to test this: http://jsfiddle.net/vqnMU/embedded/result/

React seems to be listening for input, and triggering input & change whenever it occurs.

Focusing the slider and pressing right:

Browser	Event	React Event
Chrome 34.0.1847.131**	Change	-
Safari 7.0.3	Change	-
Chrome Canary	Input, Change	Input, Change
Firefox 29*	Input	Input, Change
IE 10	Change	-

* Firefox triggers change on blur

Additionally for dragging:

Browser	Event	React Event
Chrome 34.0.1847.131	Input*	Input, Change
Safari 7.0.3	Input, Change	Input, Change
Chrome Canary	Input*	Input, Change
Firefox 29	Input*	Input, Change
IE 10	Change	-

* These browsers all trigger change on drag end

Editing ChangeEventPlugin to listen for change events on all input types (35e7aa4) appears to fix React's change & input event handling for all of the above browsers. Should I make a pull request, or is there a reason that the plugin was only listening for change events on file inputs that I'm missing?

I just ran into this problem when trying to port a widget I have to React.
Can someone in the core give some feedback on whether @eddhannay's suggestion would/wouldn't work? Thanks :)

locks · May 18, 2014

I just ran into this problem when trying to port a widget I have to React.
Can someone in the core give some feedback on whether @eddhannay's suggestion would/wouldn't work? Thanks :)

@locks I would recommend implementing your own, it seems like all the HTML input elements come with a bunch of inconsistencies that can be hard to normalize and are basically unstyle:able.

syranide · May 18, 2014

@locks I would recommend implementing your own, it seems like all the HTML input elements come with a bunch of inconsistencies that can be hard to normalize and are basically unstyle:able.

@syranide I think we should attempt to support all the built-in inputs at least mostly-reasonably.

sophiebits · May 19, 2014

@syranide I think we should attempt to support all the built-in inputs at least mostly-reasonably.

@spicyj Certainly! But there are lots of weird things that we can't fix... like not being able to read the value of type="number" if it isn't strictly numeric, etc.

syranide · May 19, 2014

@spicyj Certainly! But there are lots of weird things that we can't fix... like not being able to read the value of type="number" if it isn't strictly numeric, etc.

+1

Any workaround for IE10+ to get react to fire a synth onChange, on a browser onchange for range inputs

dmmalam · Jan 29, 2015

+1

Any workaround for IE10+ to get react to fire a synth onChange, on a browser onchange for range inputs

+1 for input on IE10+ firing onChange

chooven · Feb 11, 2015

+1 for input on IE10+ firing onChange

+1 to all the +1

kwhitaker · Feb 16, 2015

+1 to all the +1

any news? range input is still broken in IE 11.
Works great on Edge, though.

luisrudge · Jun 17, 2015

any news? range input is still broken in IE 11.
Works great on Edge, though.

+1 for this to be applied. Doesn't work for me even on Edge

rippo · Jun 25, 2015

+1 for this to be applied. Doesn't work for me even on Edge

Does not work in IE 11.

Genert · Aug 27, 2015

Does not work in IE 11.

+1

JeanCarriere · Sep 4, 2015

+1

For what it's worth, I created a work around component while this is worked out in core: https://github.com/mapbox/react-range

bsudekum · Sep 15, 2015

For what it's worth, I created a work around component while this is worked out in core: https://github.com/mapbox/react-range

+1, Love the work that everyone is doing on react, but I do feel like this bug should be a higher priority to fix seeing as we are approaching the 2 year mark from its discovery.

dancoates · Oct 8, 2015

+1, Love the work that everyone is doing on react, but I do feel like this bug should be a higher priority to fix seeing as we are approaching the 2 year mark from its discovery.

@dancoates I'm sorry that this is a lower priority for us than for you. Feel free to send a pull request though! ChangeEventPlugin is a little hairy but my blog post at http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html should give you an idea of the general strategy. For range elements, we should listen to both input and change events and fire events when either happens (but only once even if both happen).

sophiebits · Oct 8, 2015

@dancoates I'm sorry that this is a lower priority for us than for you. Feel free to send a pull request though! ChangeEventPlugin is a little hairy but my blog post at http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html should give you an idea of the general strategy. For range elements, we should listen to both input and change events and fire events when either happens (but only once even if both happen).

No need to be sorry, I realise it is a tricky one. I'll take a look at ChangeEventPlugin and see if I can help.
Perhaps a caveats section in the docs would help folks wondering why changes aren't firing? Though I guess this thread is easy enough to find.

dancoates · Oct 8, 2015

No need to be sorry, I realise it is a tricky one. I'll take a look at ChangeEventPlugin and see if I can help.
Perhaps a caveats section in the docs would help folks wondering why changes aren't firing? Though I guess this thread is easy enough to find.

👍 would love to see this fixed!

How I dealt with the problem for now
For my use, I simply added the same event on a onMouseUp event and it works for all IE 10 and above and Edge.

It doesn't give the exact same result because the value is only changed on the mouseup event but I think (for my case anyway) that it degrades beautifully.

raphaelparent · Feb 24, 2016

👍 would love to see this fixed!

How I dealt with the problem for now
For my use, I simply added the same event on a onMouseUp event and it works for all IE 10 and above and Edge.

It doesn't give the exact same result because the value is only changed on the mouseup event but I think (for my case anyway) that it degrades beautifully.

I also ran into this & would love to see it fixed.

Thanks for the suggestions for workarounds. Adding an "onClick" or "onMouseup" event was very helpful, but it's still suboptimal that nothing happens until the user let's go of the slider.

zanarmstrong · Mar 3, 2016

I also ran into this & would love to see it fixed.

Thanks for the suggestions for workarounds. Adding an "onClick" or "onMouseup" event was very helpful, but it's still suboptimal that nothing happens until the user let's go of the slider.

Check out this on StackOverflow which explains a way to address getting updates while the user is dragging...

kevinfrei · Apr 11, 2016

Check out this on StackOverflow which explains a way to address getting updates while the user is dragging...

Why is this closed? This is still a problem - onChange does not fire at all in IE11 in our testing. Forced to use https://github.com/mapbox/react-range

AlexReff · Oct 21, 2016

Why is this closed? This is still a problem - onChange does not fire at all in IE11 in our testing. Forced to use https://github.com/mapbox/react-range

We are using 15.3.2, and are experiencing this issue. Looking at the release notes for the three minor releases since then, I don't see that this has been fixed. Why is it closed? Issue #8168 seems to be the tracking case for it, but it seems like this issue has a much more thorough description of the problem.

jvanderberg · Jan 10, 2017

We are using 15.3.2, and are experiencing this issue. Looking at the release notes for the three minor releases since then, I don't see that this has been fixed. Why is it closed? Issue #8168 seems to be the tracking case for it, but it seems like this issue has a much more thorough description of the problem.

If you look at the history above, you will see that the issue was closed by #5746.
If you open this PR, you will see that its milestone is set to 16.

So the fix will be in 16, and we can’t put it in 15.x because it introduces a breaking change in behavior.

I don’t know if it’s possible to backport it to 15.x. @jquense and @nhunzaker would likely be able to answer this.

gaearon · Jan 10, 2017

If you look at the history above, you will see that the issue was closed by #5746.
If you open this PR, you will see that its milestone is set to 16.

So the fix will be in 16, and we can’t put it in 15.x because it introduces a breaking change in behavior.

I don’t know if it’s possible to backport it to 15.x. @jquense and @nhunzaker would likely be able to answer this.

It is possible! There is even a PR :) already #8575

jquense · Jan 10, 2017

It is possible! There is even a PR :) already #8575

Oh nice. Can you make a list of DOM PRs that are hanging in there awaiting review?
Then add them to umbrella in #8583 so that the relevant cases have manual tests.

gaearon · Jan 10, 2017

Oh nice. Can you make a list of DOM PRs that are hanging in there awaiting review?
Then add them to umbrella in #8583 so that the relevant cases have manual tests.

#8575 is on my todo list. Just need to test some stuff locally and then I think we'll be 👍 to merge. I'll make sure to add some relevant cases to #8583 when I get a chance to review it

aweary · Jan 10, 2017

#8575 is on my todo list. Just need to test some stuff locally and then I think we'll be 👍 to merge. I'll make sure to add some relevant cases to #8583 when I get a chance to review it

Anyone working on a browser test fixture for this? If not, I've got some time to write one up.

nhunzaker · Jan 21, 2017

Anyone working on a browser test fixture for this? If not, I've got some time to write one up.

I was planning on it but haven had a moment yet. feel free to jump in

jquense · Jan 21, 2017

I was planning on it but haven had a moment yet. feel free to jump in

No worries. There's plenty of other test cases to write up. I've got a PR out related to #8308. I'll shift gears to that.

nhunzaker · Jan 23, 2017

No worries. There's plenty of other test cases to write up. I've got a PR out related to #8308. I'll shift gears to that.

I encountered this issue today on my Windows phone. It does not call the method I specified in onChange. When is the fix going to be applied?

c0debreaker · May 27, 2017

I encountered this issue today on my Windows phone. It does not call the method I specified in onChange. When is the fix going to be applied?

This has been released in 15.6.x.

gaearon · Nov 24, 2017

This has been released in 15.6.x.

sophiebits referenced this issue May 25, 2014
Closed
Add range input to ChangeEventPlugin - Fixes #554 #1594

sophiebits added the good first bug label Jun 19, 2014

syranide referenced this issue Aug 15, 2014
Closed
onChange event for input[type="range"] doesn't fire in IE10 and IE11 #2048

zpao added the Component: Events label Dec 10, 2014

This was referenced Feb 26, 2015

Closed

onChange doesn't work on IE for type=range #3096

Closed

<input type="range" onChange /> fire too often #2454

jquense referenced this issue Jun 7, 2015
Closed
Use change event for Range inputs in IE #4052

bsudekum referenced this issue Sep 15, 2015
Merged
Use react-range for input sliders to support IE #52

zpao referenced this issue Nov 9, 2015
Closed
onUpdate/onChange/OnInput not working with input type range in IE 11 . Windows #5415

jquense referenced this issue Dec 17, 2015
Closed
normalize range input onChange events #5687

jquense referenced this issue Dec 29, 2015
Merged
Only fire input value change events when the value changes #5746

jimfb closed this in #5746 Apr 15, 2016

zpao added the Component: DOM label Aug 3, 2016

This was referenced Aug 10, 2016

Merged

IE11 fix for range input not updating grommet/grommet-docs#75

Closed

input type="range" doesn't update value in IE11 grommet/grommet#241

aweary referenced this issue Aug 30, 2016
Closed
Bug: onChange fires too often when using range sliders #7614

sebmarkbage referenced this issue Nov 1, 2016
Closed
onChange in IE11 <input type="range" /> #8168

facebook/react

Join GitHub today

input type=range onChange should fire when changing the value using the keyboard arrow keys #554

Comments

subtleGradient commented Nov 17, 2013

This comment has been minimized.

sophiebits commented Nov 17, 2013

This comment has been minimized.

jessep commented Jan 15, 2014

This comment has been minimized.

sophiebits commented Mar 11, 2014

This comment has been minimized.

eddhannay commented May 3, 2014

This comment has been minimized.

locks commented May 18, 2014

This comment has been minimized.

syranide commented May 18, 2014

This comment has been minimized.

sophiebits commented May 19, 2014

This comment has been minimized.

syranide commented May 19, 2014

sophiebits referenced this issue May 25, 2014

sophiebits added the good first bug label Jun 19, 2014

syranide referenced this issue Aug 15, 2014

zpao added the Component: Events label Dec 10, 2014

This comment has been minimized.

dmmalam commented Jan 29, 2015

This comment has been minimized.

chooven commented Feb 11, 2015

This comment has been minimized.

kwhitaker commented Feb 16, 2015

This was referenced Feb 26, 2015

jquense referenced this issue Jun 7, 2015

This comment has been minimized.

luisrudge commented Jun 17, 2015

This comment has been minimized.

rippo commented Jun 25, 2015

This comment has been minimized.

Genert commented Aug 27, 2015

This comment has been minimized.

JeanCarriere commented Sep 4, 2015

bsudekum referenced this issue Sep 15, 2015

This comment has been minimized.

bsudekum commented Sep 15, 2015

This comment has been minimized.

dancoates commented Oct 8, 2015

This comment has been minimized.

sophiebits commented Oct 8, 2015

This comment has been minimized.

dancoates commented Oct 8, 2015

zpao referenced this issue Nov 9, 2015

jquense referenced this issue Dec 17, 2015

jquense referenced this issue Dec 29, 2015

This comment has been minimized.

raphaelparent commented Feb 24, 2016

This comment has been minimized.

zanarmstrong commented Mar 3, 2016

This comment has been minimized.

kevinfrei commented Apr 11, 2016

jimfb closed this in #5746 Apr 15, 2016

jimfb added a commit that referenced this issue Apr 15, 2016

zpao added the Component: DOM label Aug 3, 2016

This was referenced Aug 10, 2016

ajreed79 pushed a commit to ajreed79/react that referenced this issue Aug 29, 2016

aweary referenced this issue Aug 30, 2016

This comment has been minimized.

AlexReff commented Oct 21, 2016

sebmarkbage referenced this issue Nov 1, 2016

This comment has been minimized.

jvanderberg commented Jan 10, 2017

This comment has been minimized.

gaearon commented Jan 10, 2017

This comment has been minimized.

jquense commented Jan 10, 2017

This comment has been minimized.

gaearon commented Jan 10, 2017

This comment has been minimized.

aweary commented Jan 10, 2017 • edited

This comment has been minimized.

nhunzaker commented Jan 21, 2017

aweary commented Jan 10, 2017 •

edited