React: Date input with defaultValue regression in 15.2

[kellycampbell]

On Chrome browser or webview on Android, an <input type="date"> with a defaultValue specified does not show the defaultValue with react 15.2, but it works in 15.1.

I've tested on multiple devices, including tablets and phones. My phone has chrome/51.0.2704.81.

It works ok on Chrome desktop browser.

With React 15.1:

With React 15.2

Additionally, if you tap the blank date field, and select the date which is what the defaultValue was set to, it leaves the field blank and no onChange event is triggered.

Test case:
<input type="date" defaultValue='2016-07-08'/>

https://jsfiddle.net/kellycampbell/69z2wepo/48384/

Inspecting the elements rendered on the Android device via chrome devtools, the 15.1 version renders as:
<input type="date">

The 15.2 version renders with the value in the element:
<input type="date" value="2016-07-08">

This also affects <input type="time">, and possibly other types, but I've only tested date and time.

[syranide]

cc @jimfb

[gaearon]

Jim is on hackamonth now so perhaps @spicyj knows what’s up.

[KCraw]

We had a similar issue setting value on controlled inputs of type="date" or type="time". It worked fine on desktop Chrome, but didn't display the value in iOS Chrome or Safari. We were getting events triggered and the value seemed to be set on the input, but not displayed.

Interestingly, when the page was rendered server side using ReactDOMServer, everything worked fine. But being rendered client side, no dice.

Downgrading from v15.2 to 15.1 fixed the problem.

[sophiebits]

@KCraw Interesting clue. Maybe that means it's https://github.com/facebook/react/pull/6406?

[h87kg]

I meet it on the mobile browser also. The default value has already been set, but it couldn't be rendered correctly.

[dozoisch]

Had to downgrade to 15.1.0 today because of something similar in mobile iOS and a datetime-local input with a controlled value. Basically the input would look empty until you change the value manually (even if it is putting it back to the same value). It looks like a bug at initialization.

[nhunzaker]

Is it possible that this is a bug in Chrome for Android? Checkout this codepen:

http://codepen.io/nhunzaker/pen/GqBqWo

Directly assigning defaultValue to a date field does not produce a UI update, yet the value is being set. If you log out input.value, you'll get the correct date.

The only way I can get it to display on Android is if I assign defaultValue _after_ value. The other way around, it's like Chrome for Android is trying to be smart and only update the UI if the value changes.

[keyz]

This should be fixed in #7397. Thanks for sending us repros and clues! :)

[kojow7]

I seem to have an issue with this fix. In Chrome I get the following error when using an input type of color:

The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

For some reason this fix seems to be removing my value. Please see the related StackOverflow post.

The error pointed me towards this particular issue number on GitHub.

[stephenmcgruer]

Hi all; greeting from the Chromium team :). I ran across this bug when doing some web-compat work involving React, and filed http://crbug.com/838898 to get the underlying issue in Chromium fixed. I'm glad to report that tkent@ has now fixed it, and from 68.0.3432.0 onwards modifying defaultValue on Chrome Android should cause the UI to refresh.

[stephenmcgruer]

Small update: I also just landed a patch for WebKit (https://bugs.webkit.org/show_bug.cgi?id=185982) which should fix the issue on Safari iOS and Chrome iOS. However I do not have any insight into when this change would make it into a release :).