MRT_FilterTextInput crash when filter type is multi select and clear empty pill.

[Toshinaki]

mantine-react-table version

v2

react & react-dom versions

v18

Describe the bug and the steps to reproduce it

mantine-react-table/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx

Line 214 in 56b022a

const handleClearEmptyFilterChip = () => {

When click the empty pill to clear filter, handleClearEmptyFilterChip just set it to an empty string "".
As we can see in handleClear, you have to check the filter type to determine what value to set when clear.

Minimal, Reproducible Example - (Optional, but Recommended)

The bug is quite clear.
I'll provide a codesandbox link if it's really needed.

Screenshots or Videos (Optional)

No response

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

None

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Toshinaki]

@alessandrojcm

Thanks for the fix.

However I can't think of the use cases of other filter functions for 'multi-select' except 'empty' and 'notEmpty', so I set

filterVariant: 'multi-select',
columnFilterModeOptions: ['empty', 'notEmpty']

But when empty or notEmpty mode is selected, the pill can't be unselected anymore.

So here is my workaround:

const handleClearEmptyFilterChip = () => {
  handleClear();
  setColumnFilterFns((prev) => {
    const { [header.id]: _omitted, ...f } = prev;
    if (
      allowedColumnFilterOptions &&
      allowedColumnFilterOptions.length > 0 &&
      allowedColumnFilterOptions.length[0]
    ) {
      if (!['empty', 'notEmpty'].includes(allowedColumnFilterOptions[0])) {
        return { ...f, [header.id]: allowedColumnFilterOptions[0] };
      }
    }
    return { ...f, [header.id]: 'fuzzy' };
  });
};

It's just a workaround so there may be better solutions.

[alessandrojcm]

@Toshinaki sorry I am not sure I follow? Multi-select could be used with contains too

[Toshinaki]

@alessandrojcm
So what the default mode should multi-select use? contains? Not fuzzy I think.

But what does contains mean?

Without setting any filter mode,
if I have a column to be a string separated by ",", and selected options "A" and "B" within the filter, does this mean:

1. "A" and "B": return rows with "A,B[,...]"
2. "A" or "B": return rows with "A[,...]" or "B[,...]" or "A,B[,...]"

(BTW I'm using custom filters, and my API server does the filtering, and currently I'm using 2 as my API logic)

And does settings the filter mode to contains make any difference to that logic?

---

To summarize,
we should add contains to the columnFilterModeOptions for multi-select, and set it as default.
And by contains, we could apply any logic we prefer.
Is that right?