DataTable: Maximum recursive updates exceeded in component <DataTable>

[caputech]

Describe the bug

Starting with Vue v3.4.15, DataTable throws the following error when Row Grouping is used in combination with Advanced (menu type) filters.

Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Reproducer

https://stackblitz.com/edit/3avo74?file=src%2FApp.vue

PrimeVue version

3.45.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Go to reproducer and check the console.

There are some related issues raised in the Vue repository. https://github.com/vuejs/core/issues?q=maximum+recursive+updates

Expected behavior

No response

[caputech]

Any update on this one? It is a fairly significant issue for us. Thanks.

[jsisson]

@caputech I was having this same issue, and after double-checking I had realized I had accidentally messed up the "filters" variable in my script;

<template>
<DataTable
    v-model="filters"
   .../>
</template>
<script setup>
import { ref } from "vue";
const filters = ref(); // OOPS
</script>

When I fixed the filters variable this error went away;

...
const filters = ref({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    name: { value: null, matchModel: FilterMatchMode.CONTAINS },
    (etc)
});
...

Maybe this helps you too

[caputech]

Thanks, but no, I have them set correctly. It seems to be a result of using the filtering and grouping together. Only appeared in recent VUE updates as they are enforcing conventions.

[Marlight]

I have the same error from Vue version >= 3.4.15

const filters: Ref<DataTableFilterMeta> = ref({
    global: {value: null, matchMode: FilterMatchMode.CONTAINS}
});

<DataTable
                    :value="productsMock"
                    v-model:filters="filters"
                    row-hover
                    striped-rows
                    size="small"
                    rowGroupMode="subheader"
                    group-rows-by="category"
                    sort-field="category"
                    data-key="id"
                    :sort-order="1"
                    :global-filter-fields="['title', 'tags']"
                > <!-- ... --> </DataTable>

Uncaught (in promise) Maximum recursive updates exceeded in component <DataTable>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

[satyavh]

I run into this error constantly, really annoying. Datatables seems to have a nag for mutating its props for no apparent reason

[nonpsisvi1983]

I was having the same issue, and comparing exampIe and my code I had realized I had non existing field in my filters

Before: const filters = ref({ global: {value: null, matchMode: FilterMatchMode.CONTAINS}, name: {value: null, matchMode: FilterMatchMode.STARTS_WITH}, # field does not exists dns: {value: null, matchMode: FilterMatchMode.STARTS_WITH}, });

After: const filters = ref({ global: {value: null, matchMode: FilterMatchMode.CONTAINS}, ip: {value: null, matchMode: FilterMatchMode.STARTS_WITH}, dns: {value: null, matchMode: FilterMatchMode.STARTS_WITH}, });