Vee-validate: Maximum call stack size exceeded with `v-on="$listeners"`

[vhoyer]

Versions

• vee-validate: ^3.0.5
• vue: 2.6.8

Describe the bug
If you create a custom component for an input and add v-on="$listeners" on the input, and try to validate the field, it will throw a maximun call stack exceeded error.

Demo link
https://codesandbox.io/s/vue-template-7jsub?fontsize=14

To reproduce
Steps to reproduce the behavior:

1. Go to demo link
2. Click on 'wololo1' field
3. Type something
4. delete what you just typed
5. tab to wololo2
6. See error

Expected behavior
Not to throw error

Desktop (please complete the following information):

• OS: Linux 4.19.56-1-MANJARO #1 SMP PREEMPT Wed Jun 26 03:35:21 UTC 2019 x86_64 GNU/Linux
• Browser: chrome
• Version: Version 75.0.3770.80 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
If you remove the v-on="listeners" from the CustomInput it starts working properly, so what I imagine is that there is some event emitting messing with it. I would really like to know what event is that so that I can omit that event from the listeners computed and call that a workaround, but I couldn't find out by looking at the src code for the ValidationProvider, thats why I'm opening my issue.

Also I'm opening this issue because I belive it is diferent from the:

• https://github.com/logaretm/vee-validate/issues/1980
• https://github.com/logaretm/vee-validate/issues/2262
• https://github.com/logaretm/vee-validate/issues/153
• https://github.com/logaretm/vee-validate/issues/316

because of the v-on="listeners" quirky to it.

RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at classify (vue.runtime.esm.js:611)
    at formatComponentName (vue.runtime.esm.js:649)
    at eval (vue.runtime.esm.js:686)
    at Array.map (<anonymous>)
    at generateComponentTrace (vue.runtime.esm.js:684)
    at warn (vue.runtime.esm.js:615)
    at logError (vue.runtime.esm.js:1882)
    at globalHandleError (vue.runtime.esm.js:1877)
    at handleError (vue.runtime.esm.js:1838)

[vhoyer]

ok, I'm just an idiot. In a more carefull look at the Provider.ts file, I found out that the event messing with the CallStack is the onBlur (from the common.ts file).

so the workaround here is to delete listeners.blur, before appling to the input.

Tho the blur might be usefull for ppl, right? actually I'm needing the @blur event available. Does my issue give any insight on how to resolve this problem, that I think its very recorrent?

[vhoyer]

can I help in any way?

[logaretm]

Your issue looks like the exact problem in #2262 and #2185

[vhoyer]

Your issue looks like the exact problem in #2262 and #2185

if thats the case, you can close the issue and I'll watch the others

[vhoyer]

for anyone comming here from a similar problem, (based on the codesandbox I created)
the solution I found was to:

<template>
  <input
    v-bind="$attrs"
    class="ui-input"
    v-on="listeners"
    @input="$emit('input', $event.target.value)"
    @blur="$emit('blur', $event)"
  >
</template>

<script>
export default {
  computed: {
    listeners() {
      const listeners = {...this.$listeners}

      delete listeners.input // for v-model to work, look at <template>
      delete listeners.blur // removing blur event to work around a bug in VeeValidate

      return listeners
    },
  },
}
</script>

It seems like a pretty ok workaround to me