What happened? I created a field using the composition API (<code

In the meantime I created a very hacky workaround: <div class="highlight highlight

Fields don't clean up their rules properly about vee-validate HOT 2 CLOSED

bgoscinski commented on June 28, 2024

Fields don't clean up their rules properly

from vee-validate.

Comments (2)

logaretm commented on June 28, 2024 1

Thanks for reporting this, I took a quick look and seems like it was caused by a couple of assumptions we had:

Always one field with the path would exist at any given time.
It is unlikely a field that would get registered before one of the same name is mounted.

feel free to PR it. we would need a test to accompany it if possible.

from vee-validate.

bgoscinski commented on June 28, 2024

In the meantime I created a very hacky workaround:

import { Field, FormContextKey } from 'vee-validate';
import { getCurrentInstance, inject, onBeforeUnmount } from 'vue';

const { setup } = Field;
Field.setup = function wrappedSetup(props, ctx) {
  onBeforeUnmount(() => {
    const form = inject(FormContextKey, undefined);
    if (!form) return;

    const { id } = getCurrentInstance().exposed.meta;
    const states = form.getAllPathStates();
    const idx = states.findIndex(
      (state) => (Array.isArray(state.id) ? state.id.includes(id) : state.id === id),
    );

    if (idx >= 0) {
      // Move the correct pathState to the beginning of the states array
      // so that vee-validate's removePathState finds it first
      states.unshift(states.splice(idx, 1)[0]);
    }
  });

  return setup.call(this, props, ctx);
};