Filters work until they don't

App Building
1

I've been using an event handler to run a script that filters table data. It was working one day and not working the next. I have checked my table name, column names and table data and I don't see any issues.

"Active" button component that runs this script

employeesTable.clearFilterStack();
employeesTable.setFilter({ columnId: "Employee_EndDate", operator: "isEmpty", id: "activeEmployees" });

activeFilter

"Inactive" button component that runs this script

employeesTable.clearFilterStack();
employeesTable.setFilter({ columnId: "Employee_EndDate", operator: "isNotEmpty", id: "inactiveEmployees" });

inactiveFilter

For testing, I added a third button "All" with just

employeesTable.clearFilterStack();

allFilter

On page load, the table display all the data

  • Active or Inactive filters work as expected
  • After clicking either filter, neither work
  • Clicking the All filter always works
  • After clicking the All filter, the Active or Inactive works just once.

I am at wits end with this and have been burning way too much time for something that appears to be pretty straight forward.

2

Refreshed the borwser (Control F5) and enabling table view state and now the scripts work.

There is something very buggy about this. What it is I don't know but this is unreliable and needs to be further reviewed and investigated.

3

And again it has stopped working.

4

I've updated my scripts to use setFilterStack even though I'm only using one filter and so far it seems to be working.

employeesTable.clearFilterStack();
employeesTable.setFilter({ columnId: "Employee_EndDate", operator: "isEmpty", id: "activeEmployee" });

to

employeesTable.clearFilterStack();
employeesTable.setFilterStack({
  filters: [
    { columnId: "Employee_EndDate", operator: "isEmpty" },
  ],
  operator: "and",
});
5

Hey @yourbudweiser, can confirm this weird behavior. Using setFilterStack has been consistent, so glad you have a working solution for now. I've filed a bug report for setFilter and can update here as I get any information on the status.

1 Like
6

@yourbudweiser Just to further update, looks like this is a mostly an issue of timing with async methods affecting the filterStack.

The reason that setFilterStack is currently working for you is because it updates the entire filterStack regardless of what is currently there. So if clearFilterStack doesn't complete in time, the filter is still updated accordingly.

setFilter is designed to update the current filterStack, so it's state before the method is called is important, and in this case that state is inconsistent.

We are releasing a fix for this next week, where the filterStack methods can be awaited. So your previous code should work with some slight modification:

await employeesTable.clearFilterStack();
employesTable.setFilter(. . .  your filter . . . )

Let me know if you have any other questions!

7

Thanks for the update Joe!

I've moved on from this issue since setFilterStack is working but this will surely resolve issues later!