Veevalidate input, number validation leads to "... must be a number type, but the final value was: NaN."

[Nils3311]

What happened?

When an input is validated against the number rule and is first filled and then cleared, it produces the error "... must be a number type, but the final value was: NaN." For a number input, I expect it to be "null" when empty, even after the field has been filled and cleared again.

I attempted to resolve this using a model value with a setter that emits null, a watcher, and other methods. Initially, it emits null, but then immediately after that emits an empty string ''. Without the VeeValidate form context, the input emits the correct null when using a setter to fix this problem.

Of course it could be solved with a transform and replace the '' with null. But I guess thats not way it should be handled and very repetitive for every number validation.

This issue also appears in several examples on VeeValidate. For instance, in the currency example at https://vee-validate.logaretm.com/v4/examples/value-formatting/.

Reproduction steps

1. Go to "https://vee-validate.logaretm.com/v4/examples/value-formatting/"
2. Fill in a value in the input
3. Remove the value from the input
4. See the error "amount must be a number type, but the final value was: NaN."

I would expect the output to be "null" and not a string.

Version

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

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

Demo link

https://stackblitz.com/edit/vee-validate-v4-input-masks-cfnp7vio?file=src%2FApp.vue

Code of Conduct

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