onChange doesn't work on IE for type=range
kud opened this issue · 18 comments
I don't know yet if I'm a newbie or it is a bug but onChange event on <input type="range"> doesn't work on IE (even 11).
Here an example of my code:
<input onChange={this.changeVolume} onMouseUp={this.changeVolume} ref="volumeSlider" type="range" min={0} max={1} step={.1} value={this.state.volume} title="Sound" />Yes, I use onMouseUp as crap patch.
I've tried with integer instead of float, it did the same. In fact, onChange never fires on IE.
Can you confirm that this fiddle is broken? http://jsfiddle.net/sua850oc/
Hi,
it's broken on windows 7 for IE 11 (also IE10 using ie devtools)
working on latest FF and chrome
@syranide, any interest in taking this on? I think we probably might just need to handle a different event for ranges (like we use clicks for checkboxes)
Windows 7, Internet Explorer 11
Oh and onClick or onMouseUp work well. But it's not updated on every step. It's updated at the end of the user's choice.
@kud Can you try a native input event listener?
I just checked in IE11 and the native change event fires just fine as you drag. The React onChange does not seem too fire at all though.
input doesn't fire at all
@spicyj It seems that the input event does not fire for range types in IE, which is what react is trying to use, The issue seems to be that this check fails in IE but not chrome/ff. Not sure how ya'll do checks like this, but you could change ChangeEventPlugin to include a (elem.nodeName === 'INPUT' && elem.type === 'range' && isIE) sort of check to make sure it uses change event
Addendum: this also seems to be the case for ie10
All browsers behave different and React is not behaving like one of the browsers (and is even inconsistent between browsers).
| IE 11 | Chrome 40 | Firefox 34 | React 12.2 in IE 11 | React 12.2 in Chrome 40 | React 12.2 in Firefox 34 | |
|---|---|---|---|---|---|---|
| drag | onchange (once per step) | oninput (once per step) | oninput (once per step) | oninput + onchange (once per step) | oninput + onchange (once per mouse move) | |
| drag end | onchange | onchange | ||||
| key left/right/up/down | onchange | oninput + onchange | oninput | oninput + onchange | oninput + onchange |
CodePen: http://codepen.io/rickbeerendonk/pen/vEdBmm
Interesting thread: https://bugzilla.mozilla.org/show_bug.cgi?id=853670
@xymostech Here's the bug I mentioned to you yesterday, if you're interested – it involves working on ChangeEventPlugin so that we can listen to both the input and change events for range inputs. The current code structure isn't super amenable to this change, but it should be possible with a little refactoring.
(Dupe of #554.)
Hi,
I recently came across this issue too. Is there any local patch that could help us while waiting for a public fix (apparently on React v15.5 or v16)?
Glad I saw this thread. My app is on React 15.5.4. I'm encountering it too on my Windows phone. User-agent is Mozilla/5.0 (Windows Phone 8.1;ARM;Trident/7.0;Touch;rv:11.0; IEMobile/11.0;NOKIA;Lumia 920) like Gecko