Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected behavior of array filterFns (arrIncludes, arrIncludesAll, arrIncludesSome) #5617

Open
2 tasks done
fbosch opened this issue Jun 20, 2024 · 1 comment
Open
2 tasks done

Comments

@fbosch
Copy link

fbosch commented Jun 20, 2024

TanStack Table version

v8.16.0

Framework/Library version

react@18.3.1

Describe the bug and the steps to reproduce it

When implementing filters on a table, I encountered an issue where the column value is a string, but the filter value is an array.

I have included a example case that shows the unexpected behavior.
I based it on the filter example from the docs, but modified it to include a new relationship state with the value complicated relationship. I also changed the setFilterValue call to set the value as an array (to simulate what would happen when selecting multiple possible values).

In my example selecting either "relationship" or "complicated" from the select filter will match with the value "complicated relationship".

This is due to how the array filters are implemented, assuming that both the column and the filter value are both arrays. But since the column value in this case is of type string it instead uses the includes method from the string prototype, which is what I think is unexpected behavior.

This is how it is currently implemented:

const arrIncludesSome: FilterFn<any> = (
  row,
  columnId: string,
  filterValue: unknown[]
) => {
  return filterValue.some(
    val => row.getValue<unknown[]>(columnId)?.includes(val)
  )
}

And this is how I expected it to work:

const arrIncludesSome: FilterFn<any> = (
  row,
  columnId: string,
  filterValue: unknown[]
) => {
  if (Array.isArray(row.getValue<unknown>)) {
	  return filterValue.some(
	    val => row.getValue<unknown[]>(columnId)?.includes(val)
	  )
  }
  return filterValue.some(val => val === row.getValue<unknown>(columnId));
}

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/tanstack-table-effaj4?file=src%2Fmain.tsx

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I think I know how to fix it and will discuss it in the comments of this issue

Terms & Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
@fbosch fbosch changed the title Unexpected behaviour of array filterFns (arrIncludes, arrIncludesAll, arrIncludesSome) Unexpected behavior of array filterFns (arrIncludes, arrIncludesAll, arrIncludesSome) Jun 20, 2024
@LiMao00
Copy link

LiMao00 commented Jul 9, 2024

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants