change event is not fired for input type=date

[dan-codes-16]

Hello,

It seems like change event is not fired for input type=date in mobile Firefox on Android.

Please try the following jsFiddle code for example http://jsfiddle.net/adaniliuk/srt6mp0p/

May be I'm doing something wrong? But the above code works well in Chrome, Safari and desktop Firefox but not in mobile Firefox - tested in Firefox v.37.0.1 on Android 5.1

Just in case vanilla JavaScript works well in this case http://jsfiddle.net/adaniliuk/voueyub9/

Thank you in advance,
Andrei

[zpao]

cc @syranide @salier - do we need to special case this & listen to a different event there?

[syranide]

cc @spicyj I think?

[Jeweller-Tsai]

I'm using react 0.13.1, and I encounter the same issue, but it's on Android 4.1.2

so I have to use the onBlur as a fallback in case the onChange callback not executed

[sophiebits]

^ Also broken on Chrome per #4733.

[jquense]

I don't think #4733 is the same issue? or if it is then this probably isn't a bug. I think this is the intended behavior. If the picker is missing some part of the date, its not possible for it to have a value since its not a valid date. The issue is that as long as any part of the picker is empty it won't fire a change (or input). Once all parts any filled in any change to a given part will fire a change.

If you wanted to "correct" this choice tho I am not sure how'd you do it, since the input gives no feedback in vanilla js either when this happens (clicked with a mouse that is).

[felixgeelhaar]

Hi there,
I'm also taken to this case: https://jsfiddle.net/02nxr8bc/1/
Would be awesome if you still can fix it.

Thanks in advance.
Felix

[AdamBoxall]

Is there any ETA for this? It completely breaks controlled date inputs for Firefox Android.

[jimfb]

@AdamBoxall You're welcomed to submit a pull request.

[nhunzaker]

I dug into this just now. I can't reproduce the issue on React 15.2.1. I'm going to trace back and see when it was fixed.

[nhunzaker]

Yikes. Wrong. This is broken on React 15.2.1. It only appears to have been fixed on master (16.0.0-alpha).

[sophiebits]

@nhunzaker Mind bisecting to figure out which commit fixes it and needs to be cherry-picked?

[nhunzaker]

@spicyj doing it now :)

[nhunzaker]

Sorry for the double post..

Looks like: 045f1a7

Awesome work, @jquense.

[nhunzaker]

If it helps, here's my test script to reproduce:

https://gist.github.com/nhunzaker/428f9f1283e790b152254510dd92afbe

I just ran it locally on my Android phone from examples/date/index.html.

[nhunzaker]

@spicyj I went ahead and put in the legwork to backport this in the following PR: #7303. Assuming this is viable, I wouldn't mind backporting it to 0.14.x and 0.13.x if possible (or interest)

[clemp6r]

Is there any workaround until react 16.0.0 is released?

[Gregoirevda]

Tried 16.0.0-alpha.3, but onChange event wasn't fired on type date

[jquense]

I'm fairly certain we've confirmed these issues are fixed yes?

[albertotorresfoltyn]

Closed, but still NOT working

[gaearon]

Note you might be getting this because the browser doesn't emit any events for invalid dates: #12056 (comment)

[tombensve]

Well, in chrome (68.0.3440.106) the input of type date do pop up a date selector. That should produce a correct, valid date. I still get no onChange event. I'm using version 16.4.1 of React.

[gaearon]

If you experience a problem please file a new issue with a reproducing example. We don't track closed issues — there's enough open ones. It's likely unrelated to the original problem which creates confusion.

[gaearon]

I'm locking this as stale (many things in this thread might have changed since the issue was filed). But again, you're very welcome to file a new one as long as you provide a specific code example that doesn't work with browser details. Then we can look and try to fix it! Thanks.