DataGrid filter of type Radio doesn't filter properly

[marinamas]

Package

Carbon for IBM Products

Description

1. Create a Datagrid table with filters
2. Add a radio filter to the table
3. When filtering string it is not looking for the exact string match
   For ex : incase two filter values are active and inactive. , using inactive as filter will return rows having active values as well. This happens with filter of type radio and dropdown
   (The checkbox filter works as expected)

Attached a video for reference

Screen.Recording.2024-07-29.at.11.16.40.AM.mov

Component(s) impacted

DataGrid filter of type radio

Browser

No response

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

"@carbon/ibm-products": "2.45.0",

Suggested Severity

Sev-2

Product/offering

NA

CodeSandbox or Stackblitz example

https://codesandbox.io/p/sandbox/datagrid-clear-fliter-issue-forked-plpt64?file=%2Fsrc%2FExample.js%3A70%2C13

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

Tasks

Preview Give feedback

1. We only expect active radio filter to show active items (not inactive)

[AlexanderMelox]

Found out react-table v7 uses includes() under the hood which the radio button uses since the default is always text unless overidden.
https://github.com/TanStack/table/blob/06703a56890122cedf1b2fa4b82982999537774e/src/filterTypes.js#L1

export const text = (rows, ids, filterValue) => {
  rows = rows.filter(row => {
    return ids.some(id => {
      const rowValue = row.values[id]
      return String(rowValue)
        .toLowerCase()
        .includes(String(filterValue).toLowerCase())
    })
  })
  return rows
}

We might be able to utilize their exactText filter for radios

export const exactText = (rows, ids, filterValue) => {
  return rows.filter(row => {
    return ids.some(id => {
      const rowValue = row.values[id]
      return rowValue !== undefined
        ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
        : true
    })
  })
}

[matthewgallo]

Agreed, exactText looks like what we want here

[marinamas]

Yes exactText would be perfect.
I have observed the similar behavior with the dropdown filter which doesn't match the exact string.

Checkbox filter is using the exactText