ValidationObserver scoped slot doesn't update dirty/pristine flag

[dmoebius]

Versions

• vee-validate: 2.2.14
• vue: 2.6.10

Describe the bug
Using ValidationObserver with a scoped slot to retrieve the current values of the flags dirty and pristine:

  <validation-observer tag="form" v-slot="{ dirty, pristine, valid, invalid, errors }">

    <validation-provider name="Text" :rules="'required|min:2'"  vid="text">
      <label>Text
        <input v-model="text" type="text"/>
      </label>
    </validation-provider>

The flags dirty and pristine are not updated, whereas valid and invalid are.

See demo: https://codepen.io/dmoebius/pen/XvwLBb?editors=1010

Additional context
With vee-validate 2.2.3 is seems to work. You can verify this if you change the version in the Codepen demo. So the bug must have been introduced between 2.2.3 and 2.2.14.

[dmoebius]

Seems to be caused by this code in addListeners:

  // add the validation listeners.
  this.normalizedEvents.forEach(evt => {
    addVNodeListener(node, evt, onValidate);
  });

this.normalizedEvents contains the input event, which means that addVNodeListener() replaces the previously attached input listener (which listened for dirty changes) with the new onValidate handler.

[dmoebius]

Or the problem is inside mergeVNodeListeners() which always removes all previously attached vee-validate handlers (those with flag _vee_isUnique). Probably a follow-up of #2185?!?

[logaretm]

This is indeed introduced by #2185, 2.2.13 seems to work fine! I will revert it and push a quick update since this is a critical problem.

[logaretm]

2.2.15 is out with a fix.

[dmoebius]

Ok, thanks. But your change reopens #2185, and the bug with the ever-growing input listener list...

[dmoebius]

This is inside the render function:

      extractVNodes(nodes).forEach(function (input) {
        addListeners.call(this$1, input);
      });

Is it really necessary to add the listeners in each render cycle? I mean, render is really called a lot! Furthermore, extractVNodes is a very expensive operation.

[logaretm]

Each time the component re-renders, the render function gets a fresh VNode, so we need to add them in each render cycle, this is exactly the same thing as @click in your Vue templates. in Either case Vue diffs the trees and doesn't necessarily remove/adds new listeners if the VNodes stay the same.

The "ever-growing" input listener list does not really occur in normal circumstances, I would need to figure out why the list is growing in the first place. As each render cycle should have new empty vnodes, so it shouldn't happen.

extractVnodes while recursive, should not be an issue because the HTML required to place an input inside a ValidationProvider is really tiny and wouldn't have a perf penalty. Still, I'm open to suggestions to improve it if possible.

Normally the time required to render a component with a validation provider is almost the time required to render its children so certainly no problems there unless you can point out cases where it would be horrible. (I tested the providers in a 120+ input and no penalty was observed #1191).

[dmoebius]

Ok, thanks for the explanation. I saw the growing handler list once in the debugger, but cannot reproduce it now with the new version 2.2.15. You're right that Vue always provides new empty vnodes to the render function; I cannot find a situation where Vue re-uses vnode instances.

[logaretm]

That's the problem. It shouldn't re-use them. My only guess is that maybe the rendering is slow enough to allow the render calls to overlap.