Card: Updates firing too many times when InputText is inside of card

[rozman50]

Describe the bug

I have a website, which contains table with around 1000 rows and around 15 columns. I also put InputText on top of table, to enable search. The problem is, that for every character inputed in search field, function for determining class is called for every cell. This means for every character inputed, testFunc is called 15 000 times.
Problem is solved if I put InputText outside of Card.

On Stackblits, I had to increase number of rows to 1000, to see bad performance. On my local machine, 500 was enough.

Not working:

explorer_aRudMxqX8z.mp4

Working:

firefox_YVVvNkGRIq.mp4

Reproducer

https://stackblitz.com/~/edit/primevue-create-vue-issue-template-p6xwch?view=editor

PrimeVue version

3.47.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Firefox 122.0 (64-bit), Google Chrome 121.0.6167.140 (Official Build) (64-bit)

Steps to reproduce the behavior

1. Create new page.
2. Paste code from stackblitz
3. Uncomment L17 - L22 and start typing in InputText. Console will show a lot of "testFunc" logs
4. Comment L17-L22 back and uncomment L3-L12 and start typing in InputText. You should see increased performance and no "testFunc" logs (just those from when table renders)

Expected behavior

Typing in InputText should not trigger updates of all elements inside of Card.

[mertsincan]

Hi,

This is not related to PrimeVue. I tried it with HTML input after removing all PrimeVue components. I get the same results. https://stackblitz.com/~/edit/primevue-create-vue-issue-template-rlsznw

If you want to use PrimeVue datatable for this, you can use lazy / virtualscroller modes to get more performance. Please see my post; https://dev.to/mertsincan/handling-big-data-on-datatable-with-checkbox-selection-multiselect-4hgc

Best Regards,