Auto refresh resets the column filter

[TomyCesaille]

Issue Type (delete the irrelevant ones)

• [x] Bug
• [x] Question

Specs

What version are you using? 2.21.10

What browser? Chrome, Firefox, not relevant

Expected Behavior

I try to have VGT auto-refreshing the table while the user interacts with the table. Especially the column-filters to search like this- >

According to conclusion from https://github.com/xaksis/vue-good-table/issues/808, you need to press 'enter' to apply the filter with trigger: "enter". I understand that. As a user, I should have all the time I need to write into the column filter field and press enter when ready.

Actual Behavior

If the auto-refresh hits while the user is writing (and did not submitted with 'enter' yet) , the field content is 'reverted back' to the previous serverParams state. This behavior is triggered when passing the refreshed data to VGT with this.rows = data; (line 62 in the jsfiddle).

NOTE about the gif: I am forcing the effect with an auto-refresh of 2 seconds and I let this.isLoading = true; to see the loading popup.

Is there an alternative way to refresh VGT rows ? Or is it the only way and this is a bit buggy with column-filter fields? We would expect to set rows to only refresh the table rows and not the full table.

Steps to Reproduce the Problem

Just type in a column-filter while the rows data is replaced (and triggers VGT to refresh the table).

jsfiddle

-> https://jsfiddle.net/efL7bh0j/

Here is a reproduction of the auto refresh with the remote mode. However, I can't get the filter to work in jsfiddle for some unclear reasons. Same goes for several jsfiddle of VGT found online like this one: https://jsfiddle.net/aks9800/c83ektoj/.

Thank you for your time, Regards,

[quyle92]

I have same issue too... I have filters enabled on the 2 columns and when I clicked enter on 2nd column, the first column filter showed up the last serverParams state, even though I've deleted it.

[TomyCesaille]

@quyle92 I don't know if this is very related to my issue, mainly linked to the autorefresh feature I'm achieving. I sadly don't have much time to look at it by myself these days.

in your case, you need to submit the first column edition by pressing enter, and only then, edit the 2nd column. Have you tried the keyup event ? It might be good in your use case.

columns: [
 {
          label: "Title",
          field: "title",
          type: "string",
          filterOptions: {
             ...
            trigger: "enter" // `enter` or `keyup`
          }       
       },
]

[quyle92]

@TomyCesaille Thanks for your reply and sorry for getting back late... After spending hours on this, I figured out the issue is at node_modules/vue-good-table/src/components/VgtFilterRow.vue line24:

<input v-if="!isDropdown(column)"
...
          :value="columnFilters[fieldKey(column.field)]"
...
>

making value as v-bind cause problem, I don't know exactly why but whenever you change data often within the input field with v-bind:value, it will behave strangely like that. A quick fix is to use v-model instead. This also helps you make multiple column filters while only needing to press "enter" once.