Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maximum call stack size exceeded with v-on="$listeners" #2347

Closed
vhoyer opened this issue Sep 18, 2019 · 5 comments
Closed

Maximum call stack size exceeded with v-on="$listeners" #2347

vhoyer opened this issue Sep 18, 2019 · 5 comments
Labels
🐛 bug Unintended behavior duplicate This issue or pull request already exists

Comments

@vhoyer
Copy link

vhoyer commented Sep 18, 2019

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):

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:

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
Copy link
Author

vhoyer commented Sep 18, 2019

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
Copy link
Author

vhoyer commented Sep 18, 2019

can I help in any way?

@logaretm
Copy link
Owner

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

@logaretm logaretm added duplicate This issue or pull request already exists 🐛 bug Unintended behavior labels Sep 18, 2019
@vhoyer
Copy link
Author

vhoyer commented Sep 18, 2019

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
Copy link
Author

vhoyer commented Sep 18, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Unintended behavior duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants