Weird error messages with Valibot unions

[Sector6759]

What happened?

2024-11-21.10-14-47.mp4

I'm trying to use a Valibot union. Each alternative in the union is an object called b. In the given example the union is either an object with a single proptery b1 of type number and a minimum of 1 or an object with a single property b2 of type number and a minimum of 1.

Observed "problems"

1. The union is immediately validated, before any form input happens if no initialValues is used or both b1 and b2 are set to an invalid initial value
2. Binding b1 and b2 to a number input, and setting both to 0, leads to a useless error message saying "b": "Invalid type: Expected Object but received Object", but if one number input is set to 0 and the other one is empty, then the error message becomes useful "b.b1": "Invalid value: Expected >=1 but received 0"

I am aware of the fact that Valibot nests issues only when using unions, but I had a quick look a the source code of the @vee-validate/valibot package and you seem to use some kind of flatten function, but maybe there is something missing?

After all, I am not entirely sure if this is solely a vee-validate issue.

Besides the mentioned problems above, I'm curious why an untouched empty number input is treated like undefined, but a touched empty number input is treated like an empty string, as you can see with the a field in the video.

Reproduction steps

See demo link

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

No response

Demo link

https://stackblitz.com/~/github.com/Sector6759/vee-validate-valibot

Code of Conduct

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