Search problem when not in server mode

[te-deum]

Hi,

While upgrading my npm modules, I have a strange problem. When I am searching, the searches inside the datatable are delayed. I finally found why : In file /src/components/custom-table.vue around lines 730-736 You first watch search props changes and call changeSearch function before the watch search props that change the currentSearch const. You may invert these watch to not have a delay between search props and searched value. Change these lines :

watch(() => props.search, changeSearch);
watch(
    () => props.search,
    () => {
        currentSearch.value = props.search;
    }
);

By these lines :

watch(
    () => props.search,
    () => {
        currentSearch.value = props.search;
    }
);
watch(() => props.search, changeSearch);

[bhaveshpatel200]

HI,

Can you please reproduce this in one of my demos, if yes then please give me all the steps to reproduce first and then i will think about that.

[te-deum]

Your demos are in server mode. So I can't reproduce the problem.

Everything was working fine since I update local npm packages (It update Vue from 3.3.4 to 3.3.7). I reproduce locally with both datatable version (1.1.1 and 1.1.2).

It seems logic that both watch orders are not coherent since currentSearch is used in filterRow. If currentSearch is not updated by watcher before calling filterRow then filterRow will search with an outdated currentSearch value.

[bhaveshpatel200]

Actually we have not changed anything regarding search, so its very strange.

Ok, can you please give me proper steps for reproduce that scenarios, so i can check easily and update if needed.

or you can also send me your datatable code.

[te-deum]

Here is a very simple example that reproduce the problem. Hope you will have the same result... dt-test.zip

[bhaveshpatel200]

Ok, will check and let you know.

[te-deum]

Re,

I just try to merge both watch into one and it work. It might be better for "optimization".

watch(
    () => props.search,
    () => {
        currentSearch.value = props.search;
        changeSearch();
    }
);

While we are talking about optimization, it's possible to get filtered rows without re-filter every items (around line 340):

    getFilteredRows() {
        return filterItems.value;
    },

[bhaveshpatel200]

Hi,

Ok, i will check and update.

But It's very strange to not working your demo and already working fine on our vue3 template. you can check from below link. https://vristo-vue.vercel.app/datatables/order-sorting

[te-deum]

Yes, I agree that it's strange. Everything was working fine since I update Vue package to 3.3.7.

FYI : We are using Vristo here in our project and we love it 👍 I upgrade every package to the latest version without problem (I just have to replace @intlify/vite-plugin-vue-i18n intlify/unplugin-vue-i18n and remove import '@fullcalendar/core/vdom'; in calendar with the latest version of Full Calendar)

[bhaveshpatel200]

Yes, seems search not working properly with latest vue version.

Have you test this solution proper for both client and server side renderings? watch( () => props.search, () => { currentSearch.value = props.search; changeSearch(); } );

[te-deum]

No, but it should work cause it's similar to both watch in only one call.

[bhaveshpatel200]

Yes, I know. i will check and update soon.

Thanks

[bhaveshpatel200]

Hi te-deum,

Resolved above issue and updated package.