[Bug Report][3.6.8] Pasting valid values into text box causes form validation to fail when validate() called immediately

[jflemingframe]

Environment

Vuetify Version: 3.6.8 Vue Version: 3.4.27 Browsers: Chrome 124.0.0.0 OS: Windows 10

Steps to reproduce

1. Create a v-form containing a text field.
2. Make a validation rule (or more than 1) for the text field. 1st rule should check if the field is filled.
3. The text field has a @update:modelValue callback that calls formRef.validate() to see if it should perform an action based on the form validity.
4. Paste a valid value into the text field. (do not type)

Expected Behavior

calling formRef.validate() in the modelValue event handler should show that the form is valid.

Actual Behavior

The 1st validation rule is run with a "" value. Its always just the first. The result of validation is set to false. Then the rules are run again with the real values. The result of form validation is still false.

Reproduction Link

https://play.vuetifyjs.com/#...

Workaround

Call await formRef.validate() twice in a row.

Other comments

Workaround: Call await formRef.validate() twice in a row. Feels like this happens the first time a form is validated (first input event).

• resetValidation() does the same thing as validate() it seems.
• observation (seen in the playground) the v-form's modelvalue is false at the time, but a moment after that handler finishes, it is set to true. Seems like the validation isnt done after validate() promise resolves!

Prior issue (#19089) seems very similar but was closed. They did not call validate() outright there.

In our app we wish to emit some values if the form is valid. This includes while typing or pasting a value.

[jflemingframe]

I do see a similar issue here: https://github.com/vuetifyjs/vuetify/issues/17501 Please fix this. Calling await formRef.validate() should be expected to work. Not return early with the prior value. I suppose its understandable if the form isnt updated when update:modelValue is called? But that seems like a confusing limitation.

I've at least logged that there is a workaround for this.

The workaround suggested here is in conflict:

• (older issue which said nextTick wont work?) https://github.com/vuetifyjs/vuetify/issues/19089#issuecomment-1905607379
• (nextTick suggested) https://github.com/vuetifyjs/vuetify/issues/17501#issuecomment-1570323592