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!

8

This thread was really useful for me :grinning:

We had an issue where manually using setValue for a range component from a 'clear filters' button wasn't being reflected in the table

Awaiting that code to run and then running clearFilterStack fixed that for us

2 Likes
9

@joeBumbaca hey, did the await-ability for filterStack methods get released? Seems Im encountering similar issues.

10

Hey @perelin! Thanks for reaching out.

These methods are all async now, meaning they should be await-able. :+1: Can you describe the specific issue that you're experiencing?

11

Hi Darren, sure.

Simple example: I want to clear the filterStack of a table. Assumption: after await table1.clearFilterStack() the filterStack will be null. But its not directly. Eventually it is null when I check it a second time.

See attached json export.

image
image1867×901 182 KB

Untitled (2).json (134.7 KB)

12

Ah got it. I think this is actually a symptom of something else entirely. By default, JS queries close over the value of certain variables while executing, meaning the references themselves can become stale. There's a way to override this behavior in the "Advanced" settings menu.

image
image1042×872 49.9 KB

In my testing, activating that particular setting causes the console output to read as you'd expect!

1 Like
13

Hi Darren,

oh wow, thanks! But this is VERY well hidden on not intuitive. Why would I ever NOT want to keep references in my queries in sync with the app? Also the first time I am actually aware that there is a setting like this. Tbh: I think this would have saved me from a lot of debugging and finding workarounds for strange behaviour.

But thanks again, also for the quick reply!

1 Like
14

It's actually pretty rare for a single query to both mutate and read the value of external variables! On top of that, maintaining those variable references can be expensive. That said, I agree that the toggle could be more visible!

1 Like