Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Date input with defaultValue regression in 15.2 #7233

Closed
kellycampbell opened this issue Jul 9, 2016 · 11 comments

Comments

Projects
None yet
@kellycampbell
Copy link

commented Jul 9, 2016

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:
screenshot_20160708-194606

With React 15.2
screenshot_20160708-194726

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

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2016

cc @jimfb

@gaearon

This comment has been minimized.

Copy link
Member

commented Jul 11, 2016

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

@KCraw

This comment has been minimized.

Copy link

commented Jul 19, 2016

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

This comment has been minimized.

Copy link
Collaborator

commented Jul 19, 2016

@KCraw Interesting clue. Maybe that means it's #6406?

@h87kg

This comment has been minimized.

Copy link

commented Jul 25, 2016

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

img1

img2

@dozoisch

This comment has been minimized.

Copy link

commented Jul 29, 2016

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

This comment has been minimized.

Copy link
Collaborator

commented Jul 29, 2016

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 comment has been minimized.

Copy link
Member

commented Aug 2, 2016

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

@kojow7

This comment has been minimized.

Copy link

commented Apr 12, 2017

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

This comment has been minimized.

Copy link

commented May 16, 2018

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

This comment has been minimized.

Copy link

commented May 30, 2018

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 :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.