primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.06k stars 1.11k forks source link

Tooltip: Too much recursion in combination with DataTable #5092

Closed ig-onoffice-de closed 6 months ago

ig-onoffice-de commented 6 months ago

Describe the bug

When using a tooltip in the DataTable wrapped with the RouterLink, there is an error message RangeError: Maximum call stack size exceeded and the application breaks.

index-o4jxLur1.js:20 Uncaught RangeError: Maximum call stack size exceeded
    at Object.getParents (index-o4jxLur1.js:20:7555)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)
    at Object.getParents (index-o4jxLur1.js:20:7540)

In my case, the error only occurs in the built app not in dev mode!

The error came with version 3.45.0 (I think it was https://github.com/primefaces/primevue/commit/f39b351f10d7700b77ed7fdea9a47c8b88f6163d)

Reproducer

https://codesandbox.io/p/sandbox/ecstatic-villani-3sx3rz?file=%2Fsrc%2FApp.vue%3A15%2C25

PrimeVue version

3.45.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

  1. Open the reproduction code
  2. run npm run build
  3. open the preview There is no button shown because the error was thrown. In dev mode the button is there.

Expected behavior

The button should be displayed and the tooltip should work as expected.

mertsincan commented 6 months ago

Thanks a lot for your report! This issue has already been fixed in the next version.

Best Regards,

ig-onoffice-de commented 6 months ago

Actually, with version 3.46.0 there is the same problem...

ig-onoffice-de commented 6 months ago

Actually, with version 3.46.0 there is the same problem...

@mertsincan Could you please reopen the issue?

timyourivh commented 5 months ago

@ig-onoffice-de I was running 3.45.0 and faced the same issue, but it was fixed after updating to the latest version (which is 3.47.2 at the time of writing this)

mherb63 commented 5 months ago

I'm seeing the same issue with a DataTable that is contained within an overlay div. When a row is selected in the table i'm getting the below error. Note that the error only happens if I select any row beyond the 2nd row.

uncaught RangeError: Maximum call stack size exceeded
    at MutableReactiveHandler.ownKeys (reactivity.esm-bundler.js:546:3)
    at Function.keys (<anonymous>)
    at Object.deepEquals (utils.esm.js:837:25)
    at Object.deepEquals (utils.esm.js:843:19)
    at Object.deepEquals (utils.esm.js:843:19)
    at Object.deepEquals (utils.esm.js:843:19)
    at Object.deepEquals (utils.esm.js:843:19)
    at Object.deepEquals (utils.esm.js:843:19)
    at Object.deepEquals (utils.esm.js:843:19)
    at Object.deepEquals (utils.esm.js:843:19)

I have tried 3.47.1, 3.47.2, and 3.48.1

erikherberg commented 3 months ago

I have tried 3.47.1, 3.47.2, and 3.48.1

Additionally tried with version 3.50.0. Seems like the error does still occur.

ig-onoffice-de commented 3 months ago

I am using version 3.50.0 and the problem is solved.

erikherberg commented 3 months ago

Tried with a clean install and it seems to work without problems. May need to investigate what causes this issue.