Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jflemingframe opened this issue Jun 8, 2024 · 1 comment

Comments

@jflemingframe
Copy link

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
Copy link
Author

jflemingframe commented Jun 8, 2024

I do see a similar issue here: #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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant