Date Fields appear empty on first load when initialized with Vue

[bzarzuela]

Version

2.5.11

Reproduction link

https://jsfiddle.net/u1wssnwL/3/

Steps to reproduce

Create an input with a type date and initialize with any valid date value.

View on Safari IOS and you'll see that it will appear as empty although the value is set because when you click the field, you'll see that the IOS datepicker will be set to the value you provided.

It only affects date inputs that have been initialized with Vue and in the JSFiddle provided, there are 2 date inputs for easier reproduction

What is expected?

Both date inputs should have the same value

What is actually happening?

The date input that was initialized with Vue appears empty

[posva]

mmh, it looks like dynamically adding the element to the doc makes this behaviour appear:

var i = document.createElement('input')
i.setAttribute('type', 'date')
i.setAttribute('value', '2017-07-07')
document.body.appendChild(i)

Not sure this is something we should workaround in Vue

For the moment you can use this workaround:

<input type="date" :value.prop="'2017-07-05'">

this will set input's value with js

[bzarzuela]

Yes, thanks for that workaround, I ended up using Vue to initialize the form field in my project.

I think it's something that Vue should address because it breaks expected behavior. In my app, the entire page is a div with an ID of "#app" and because Vue is instantiated on that, it affects pages that don't use Vue. This convention is what Laravel comes out of the box with so I have a feeling other developers might be affected too.

[posva]

Keep in mind it breaks expected behaviour because Safari has a bug
If laravel comes with that convention, I imagine it's also possible to workaround there.

I'd like to give you some hints for a PR but I'm not sure where to add the workaround 😞

[bzarzuela]

I see. If this is a Safari bug, I don't think it has to be resolved in Vue.

Maybe I can contribute a note in the documentation on this browser quirk instead? Not sure if this warrants an inclusion in the docs though.

[mbardelmeijer]

Ran into the same issue as well. As @bzarzuela mentioned as well, my app is also wrapped in a "#app" div. On page load the date field is empty, but a value is set. When setting is manually later of selecting another date the date is shown. When disabling Vue.js, it worked like expected.

[chrisonedata]

Did anyone solve this yet? I have the same problem.