The following will prevents the refresh

html,
body {
overscroll-behavior-y: contain;
}

It is in the docs, my mistake was copying the “working” method for q-list into the q-menu… didn’t notice the different. Thanks a lot!

I read it here https://github.com/vuejs/vue/issues/7788 and the explanation about strict shows that it does just that - looping inside everything.

I don’t have any watch function in this regard, all other dispatch calls are going through with no problem, no breakpoints were breaking the execution so only that specific dispatch call was executing when the error occurred. Unless someone has something in his sleeve, I’m out of magic

OK, strict in Store to false did the trick, obviously it was meant to be false in production so while developing, how can I make it true and fail safe? Thanks

A bit more digging led me here

and this is the code of traverse

function _traverse (val, seen) {
  var i, keys;
  var isA = Array.isArray(val);
  if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
    return
  }
  if (val.__ob__) {
    var depId = val.__ob__.dep.id;
    if (seen.has(depId)) {
      return
    }
    seen.add(depId);
  }
  if (isA) {
    i = val.length;
    while (i--) { _traverse(val[i], seen); }
  } else {
    keys = Object.keys(val);
    i = keys.length;
    while (i--) { _traverse(val[keys[i]], seen); }
  }
}

From debugging it looks like its looping inside the whole Store object and at some point fails. From the screenshot, after 10 levels, maybe when the 11th is about to run.

I don’t know why it happens only with this dispatch but maybe there’s a way to add the number of levels? The object can be a bit deep.

Here goes, for every property of the userData in the store I have the following “double” functions, one that commits the other. For some reason, this dispatch is triggered over and over even though there is only one call as shown above. I put breakpoints everywhere in my code but nothing else is executed except for the dispatch code where it fails.

updateLastStructure({ commit }, payload) {
    commit("updateLastStructure", payload);
},

updateLastStructure(state, payload) {
    state.user.settings.lastStructure = payload.lastStructure;
},

OK, I tried something else and it’s not related to the chip but to
this.$store.dispatch(“userData/updateLastStructure”, { lastStructure: “” });
I see when debugging that while the above line is executed once, the actual commit is done over and over again until… well…

Other calls to dispatch of other properties do not cause this error, as if something specific with this call is failing with: InternalError: too much recursion in Firefox or maximum callstack size exceeded in Chrome. Any idea?

Yes it does and it worked perfectly with quasar 1.14.x, since then several versions of quasar were updated and I wonder if at some point, something was changed. Anyway, I removed the v-show completely and also currentViewName is updated after the failed line but still the same error occurs.

I did some more debugging and it looks like it’s coming from QResizeObserver

The if condition fails and goes into invoke with error and there it fails

That’s the thing, there are several lines of code but this one specifically is causing the error, if I comment it out, there is no error
this.$store.dispatch(“userData/updateLastStructure”, { lastStructure: “” });

Hi

When implementing a remove functionality for a qchip, when the code is executed, I see the following error

In qchip.js, the following code from the error is

__onRemove (e) {
      if (e.keyCode === void 0 || e.keyCode === 13) {
        stopAndPrevent(e)
        !this.disable && this.$emit('remove', false) <<<< failed code
      }
    },

The thing is, it happens only when executing

this.$store.dispatch("userData/updateLastStructure", { lastStructure: "" });

which is a simple data saving to the store object. Also, it never reaches the one last line in the event, after the above one.
Any hint on where to look will help, thanks

<q-chip dense removable v-show="currentViewName != ''" @remove="showDefaultView()" color="primary" text-color="white">
    {{ currentViewName }}
</q-chip>

Thanks, I read that but I’m using also non-quasar components (charts/grids/etc) and I was hoping there’s an additional tool/extra that I can use in order to convert the coloring/palette accordingly. Thanks.