4.12.x doesn't produce errorMessage from useField in some cases if multiple useFields are used with same name.

[SimmeNilsson]

What happened?

We use custom components for radio buttons and radio button groups.
In the radio button group component we wrap a set of radio buttons in a fieldset and show the potential error message for the group.
After upgrading to vee-validate 4.12.3 from 4.11.8 we no longer get the error message to the ref we extract from useField in the radio button group component.
Another difference is that if we show error message on each radio button, only the last one in the set shows error message after upgrade, while earlier all showed the same message.

I read that some functions are getting deprecated, but I didn't see useField among those, which is the one used here.

Note: Only reason I haven't checked Safari among browsers is that I haven't tried it.

Reproduction steps

Error version 4.12.3

1. Go to https://stackblitz.com/edit/vee-validate-issue-template-kknk94
2. Click submit
3. Error message is not displayed inside the fieldset.

Working version 4.11.8

1. Go to https://stackblitz.com/edit/vee-validate-issue-template-dqzgwu
2. Click submit
3. Error message is displayed inside the fieldset.

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/edit/vee-validate-issue-template-kknk94

Code of Conduct

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

[logaretm]

Previously, multiple fields could share the same name given they represent the same field. However that caused a lot of issues when those fields get mounted/unmounted as they override one another #4476 #4557 (f688896).

I see you were just interested in the errorMessage in the radio group and not really interested in multiple useField nature of <4.12.x.

You can use useFieldError to extract an error message without having to use useField along with the other smaller composables useFieldTouched, useFieldDirty, etc...

Another difference is that if we show error message on each radio button, only the last one in the set shows error message after upgrade, while earlier all showed the same message.

Passing type: 'radio' to the useField call in your individual radio item will fix that, that has been always required even prior to 4.12.x. It just worked with radio types, but you would have noticed issues with checkbox types if you didn't.

Here is the example with the fixes, i removed suppressError to show that each item gets the same error:

https://stackblitz.com/edit/vee-validate-issue-template-mth42o?file=src%2Fcomponents%2FVRadioGroup.vue,src%2Fcomponents%2FVRadio.vue

The multiple field support was a side effect of a refactor done between v4.8-v4.9 but was never intended, older releases would have the same behavior as we do now I believe.

A general rule of thumb here is useField represents an actual field in the UI, it is not a mirror for that field. Maybe we can expose something like useFieldState or something like that to allow for your use-case, but smaller composables already do the job here.

[SimmeNilsson]

Thank you, that solved the problem for us. 👍
Search only brought up the component version (indexing issue?) and I wrongly assumed type was only needed for forwarding to actual input element. 😅