Vue-formulate: Optional validation inside FormulateForm doesn't work as expected

[joaquinwojcik]

Describe the bug
Validation message of optional fields that are inside a FormulateForm doesn't hide right after field is cleared. It waits until next render.

To Reproduce
Steps to reproduce the behavior:

1. Go to CodeSandbox
2. Click on Email or WhatsApp
3. Type anything you want and delete it.
4. Validation message still appear until you change other field inside the form.

CodeSandbox

https://codesandbox.io/s/bug-with-optional-fields-inside-formulateform-ubdis?file=/src/components/Reproduction.vue

Expected behavior
Validation message should disappear when optional field is empty.

Screenshots

I clear email field. Message changed to "Please enter a valid email address"

I clear WhatsApp Phone field. Email's validation disappear.

Device information:

• Device: Desktop PC
• OS: Windows 10
• Browser: Chrome
• Version: 85.0.4183.102 (official build) (64 bits)

[joaquinwojcik]

(continuing discussion from #126)

@justin-schroeder
I was creating the sandbox when I realized that the problem was related to optional fields inside formulate form and not to custom validation rules.

[justin-schroeder]

Great reproduction, I think I know what's going on here but I'll dig into it 👍

[joaquinwojcik]

I think I found the problem.

I'm calling performValidation on FormulateForm input event to check form validity and based on it, disable a button.
In the first render I'm getting Cannot read property 'hasValidationErrors' of undefined, and this breaks the validation.

<FormulateForm v-model="account" @input="performValidation" ref="form">
<!-- [all form fields] -->
</FormulateForm>

[...]
data() {
    return {
      account: {},
      hasErrors: false,
    };
},
methods: {
    async performValidation() {
      // following line is breaking validation
      this.hasErrors = await this.$refs.form.hasValidationErrors();
    }
  }
[...]

If I stop listening to input event or if I remove that line, the validation works fine.

So input event is being fired before Vue register the $refs. Is that even possible?

[justin-schroeder]

There was a an error there, but you're right calling hasValidationErrors() resulted in a race condition between validators and the last one in was validating the field before the last character was removed. To fix this, I've adjusted your call to run only after nextTick and that works fine. Ultimately, in v2.5 these kinds of issues will go away since we'll have a context object for the form (see #127) — but for now this somewhat clunky solution should work. I'll close this as I don't think there's anything to fix with the v2.5 roadmap. Thanks for the good issue though, bets of luck 👍