$externalResults are not automatically cleared on $model change when using dynamic/computed rules
renatodeleao opened this issue · comments
Describe the bug
If you're using dynamic rules
object via computed
as documented, your client-side validations work dynamically as expected. If you add $externalResults
to the mix and the rules rules
are re-computed after $externalErrors
been applied — this part is key —, $externalErrors
are no longer cleared when $model
changes.
Reproduction URL
https://stackblitz.com/edit/vitejs-vite-j6ywfz?file=src%2FAppForm.vue
To Reproduce the issue
- Fill "Y" field to just pass client-side validations
- Click "submit"
- See that
$externalErrors
are applied correctly to "Y" field input - Tweak "X" field value for
rules
to be recomputed, it doesn't matter what value you set. - Now try to change the "Y" input of the original concat item that still has
$externalErrors
on it and see that errors are no longer cleared as expected.
Notes
- I've printed
$externalErrors
and form state and validation state (v$) so you can see that everything keeps working, with exception to$externalResults
that stops being mutated after it step 4. - The reproduction example is based on a demo from this repository
Expected behavior
$externalErrors
should be cleared from inputs when $model
is changed, independently from any rules
recomputation
Additional context
The culprit line is the $model
setter which was added by this commit. Basically when rules are computed with an existent $externalResults
ref, a watcher for validations is triggered and setValidations
is called, internally cachedExternalResults
is populated with the current value, and when $model setter is trigger, $externalResults
is mutated with the existent field error instead of removing it. It only works without dynamic rules by chance, because cachedExternalResults
is an empty object and thus cachedExternalResults[key]
returns undefined
effectively removing the error.
vuelidate/packages/vuelidate/src/core.js
Lines 468 to 470 in 08aa514
Solution
I don't know if this was added by mistake or there's a real usecase for this in $model
but the issue goes away without any test failure by doing
if (external) {
external[key] = undefined
// delete external[key] only works for vue3
}
Related docs:
- https://vuelidate-next.netlify.app/advanced_usage.html#external-results-with-composition-api
- https://vuelidate-next.netlify.app/advanced_usage.html#clearing-externalresults
EDIT
This issue was created based on a much complex setup assumption and was reworked to reproduce with a basic one.
The original demo is https://stackblitz.com/edit/vitejs-vite-wgbh2d?file=src%2FAppForm.vue
UPDATE: I think i've found the cause and it's not related with collections or state modifications, but with dynamic rules paired with $externalResults
.
I'll reword the issue and add a simpler example as I can reproduce it with one of your test-project
demos