How to avoid unwanted error message to be shown instantly?

[hnakamur]

Hello,
I have a problem of the unwanted error message
is shown instantly and then hidden again.

This form shows an input text when the checkbox is checked.
This text input is a required field.
Initially, before any user inputs, we do not want to the "required"
error message.
However after user inputs, we do want to the "required" error message
if the text is empty.

Test scenario:

1. Check the checkbox.
2. Input a character.

Things happened:

• The error message is shown instantly and then become hidden (only for the first time).

Expected behavior:

• The error message is not shown when a character is added.

The demo of this problem:
https://stackblitz.com/edit/cplk4q-ezqvta?file=src%2FApp.vue

Could you let me know how to avoid this problem?
Thank you.

[hnakamur]

I found that I can achieve the behavior I want using resetField from useField.
https://stackblitz.com/edit/cplk4q-ezqvta?file=src%2FApp.vue

[hnakamur]

The real answer which works for me is #4799 (comment)

[hnakamur]

I found that using resetField causes another problem:
meta.valid is not updated after inputting a character.
https://stackblitz.com/edit/cplk4q-ezqvta?file=src%2FApp.vue

By using setFieldValue, meta.valid is updated correctly after inputting a character.
https://stackblitz.com/edit/cplk4q-ezqvta?file=src%2FApp.vue
However this has the problem the error message is shown instantly and then be hidden
for the first time when you input a character.

[hnakamur]

I found a solution using meta.pending.
https://stackblitz.com/edit/cplk4q-ezqvta?file=src%2FApp.vue