DatePicker validation issues

[philnee]

Overview of the problem

Buefy version: 0.8.2
Vuejs version: 2.6.10
OS/Browser Chrome version 76.0.3809.100

Description

Required Datepicker components not showing validation as expected. Non editable instances don't validate when no value selected and editable instances show validation that value is required after a value is selected

Steps to reproduce

See codepen for examples https://codepen.io/philnee/pen/VwZawyM

1. Add a required and editable datepicker to a field.

2. Select a date from the dropdown

3. Date is shown in the input however the field still shows red and 'Please fill out this field' displayed

4. Add a required not editable datepicker

5. Leave the field blank

6. Validation is not shown when tabbing over the field

Expected behavior

I expected that if either field was left empty, when the field loses focus validations to be shown. When selecting a date from the dropdown (or typing in in the case of an editable field) the validation to be cleared

Actual behavior

The editable field still shows validation after a date is selected from the dropdown. The user has to either reselect the date from the dropdown, or focus the field and lose focus again.

The non editable field never seems to show validation.

Thanks

[philnee]

FYI. @GerryWilko and I have been having a look through this and the checkHtml5Validity function is being called before the underlying input value exists. As a workaround for the time being we have called the child inputs checkHtml5Validity function after a delay through a set timeout. (see updated codepen with the middle datepicker https://codepen.io/philnee/pen/VwZawyM)

[jtommy]

@philnee You're right, adding a nextTick there is a bad effect on first select date.
I should manage in a different way