vee-validate icon indicating copy to clipboard operation
vee-validate copied to clipboard

Typing a leading zero into a month component of a date field erases the month and year, in firefox

Open rubinlinux opened this issue 1 year ago • 0 comments

What happened?

Typing into the 'month' part of firefox's built in date input erases the existing day and year components of that field's previous value.

Reproduction steps

If you create a field such as: <Field name="foo" type="date" />

Open the form in firefox.

Type in a valid date:

  • Click left part of the box to highlight the month component, and type in '09232024'. This sets the box to september 9th, 2024. Try to change the month to october using a leading zero:
  • Click the left part of the box to highlight the month component again, and type '08'

Observe that the day and year parts of the box turn into 'dd' and 'yyyy' strings and you loose the old date, where what I wanted to happen was just to edit the month.

Something similar happens if you type in a 0 in the day field, so typing in to the box '09012024' fails to set the date to that, because when the '0' of the 3rd character is typed, the box becomes 'invalid' and all the fields reset to their 'mm / dd / yyyy' form.

When using a generic input (Not vee-validate's form) this does not happen; HOWEVER, if you wire up @change="foo.handleChange" where foo is a useField, the behavior happens again.

In chrome this does not happen.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

  • [X] Firefox
  • [ ] Chrome
  • [ ] Safari
  • [ ] Microsoft Edge

Relevant log output

No response

Demo link

nope

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

rubinlinux avatar Aug 30 '24 22:08 rubinlinux