v4 docs request - custom useField example that matches default Field component behavior

[thebleucheese]

This is very similar to #3091

Question - what is the recommended way to get a custom useField component to behave like the defaults in a basic Field component?

Currently, I have a Form with a number of text Fields in it, which show error messages when they lose focus. This shows validation messages the first time I tab through the field elements without entering any data.

I'm creating a custom component, and I'm using the composition API by following the custom input example in the docs and trying to get it to behave like the Field components I already have in my form.

As I understand it, handleChange validates the field so I've tried to get that to fire every way that I could see for the input elements in the sandbox, but can't get it to to validate on blur like the default Field component. https://codesandbox.io/s/custom-text-input-with-vee-validate-v4-8k9gy?from-embed=&file=/src/components/TextInput.vue

<input
      :name="name"
      :id="name"
      :type="type"
      :value="inputValue"
      :modelValue="inputValue"
      :placeholder="placeholder"
      @blur="handleChange"
      @change="handleChange"
      @input="handleChange"
      @update:modelValue="handleChange"
    />

What I'm trying to achieve is as soon as the element loses focus I'd like it to validate and display the errorMessage if the user has not input anything in the field.

Suggestion - I think an example of this in the docs might be helpful since currently it doesn't match the Field behavior out of the box. There's a bit of a learning curve with useField. I don't know how much I should be implementing myself vs trying to use existing vee-validate functions. I saw in the previous question, you show a custom blur event handler that calls handleChange, but I want to make sure I'm leveraging all the existing behavior that I can.

[logaretm]

I think this fits a discussion more than an issue, I will try to answer your questions here:

I'm trying to achieve is as soon as the element loses focus I'd like it to validate and display the errorMessage

You can call validate instead in the blur function, check this.

I don't know how much I should be implementing myself vs trying to use existing vee-validate functions

It would be hard to scope an example for the same reason, if you check the source code for the <Field> component, it just does too much to be put into an example and some stuff needs a lot of explanation.

I want to make sure I'm leveraging all the existing behavior that I can

You can take a look at the Field component source code, it does a lot of things and it does have some sensible behaviors out of the box which you may want to replicate.