React Hook Form & Yup: If validation error, unexptected behaviour when typing into month-input

[Danane84]

With the help of react hook form and yup I created a simple form with two inputs called date (type="month") and text(type="string"). Here is my codesandbox: https://codesandbox.io/s/react-hook-form-v7-validationschema-forked-myfm6m?file=/src/index.js

My problem is the following:

I defined a yup.date.min()-validation rule for date to make sure that users cannot enter a date earlier than 1970-01. The rule runs on onChange-mode.

Now let's say a user wants to type the year-part of the date directly in the input and not via the date picker - eg. the year 1984 - he will type 1, 9, 8 and 4.

When typing 1, the year-part of the input shows 0001 and the .min-validation will throw an error as expected.

However in the next step, when typing 9 the date-input's value starts to behave in an unexpected manner and shows 0009 (and the error remains). This pattern continues when typing 8 and 4 which will lead to values of 0008 and 0004 respectively.

While trying to debug this problem, I tested a yup.string.min(5)-validation rule on the text input to see if I get a similar behaviour when the validation fails. However, this is not the case. I can still continue typing into the text field as expected also if the validation fails becasue I have less than five characters in the input

One other thing that I realized is that changing my form from <form onChange={handleSubmit(onSubmit)}> to <form onSubmit={handleSubmit(onSubmit)}> will solve the described issue with my date-input. However, I would like to keep my form submitting onChange if possible.

So what is wrong with my date-input? Any help in the right direction would be highly appreciated.