"popover" columnFilterDisplayMode breaks custom filterFns

[ajesamann-quorum]

mantine-react-table version

1.3.1

react & react-dom versions

16.12.0

Describe the bug and the steps to reproduce it

Hey there!

We are trying to use the popover option in the columnFilterDisplayMode, however I noticed whenever we switch to this from subheader our custom filterFns that we wrote have completely stopped firing.

The most straight forward way to reproduce this is as follows:

1. create a custom filterFn and add a console.log at the top of the logic (make sure it is provided to the table, and the column is set to use it properly)
2. test filtering on subheader mode first and you will see a log pop up in the console
3. now switch the columnFilterDisplayMode to popover and try to filter a column, you will not see the log anymore and the filtering seems to default to Mantine's built-in functions

I'm fairly confident this is a bug as I would assume switching the columnFilterDisplayMode should work out of the box (subheader works just fine) -- I don't see anything extra mentioned in the docs surrounding this.

If it helps at all, this is how we provide the logic for this with useMantineReactTable options:

    const mantineTable = useMantineReactTable({
        columnFilterDisplayMode: "popover",
        filterFns,
        // rest of options
    })

and here is our custom filterFns that we want to use:

const filterFns = {
    multiSelect: (row, id, filterValue) => {
        console.log('TEST LOG')
       // rest of logic
}

and we provide it to the column like this:

filterVariant: "multi-select",
filterFn: "multiSelect",
mantineFilterMultiSelectProps: { data: filterData },

Again, this works fine on subheader mode. Any help would be greatly appreciated as this is a pretty large blocker!

Minimal, Reproducible Example - (Optional, but Recommended)

We will provide a sandbox example shortly and update the issue with a link.

Screenshots or Videos (Optional)

No response

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

Not initially, but we may take this course of action if we are unable to find a workaround in a timely manner.

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.

[ericblade]

I was just playing with popover to see how it worked, and I noticed in my custom app that popover with select doesn't work at all. I checked with the documentation and examples, and find that the example describing popover also does not work with select.

https://v2.mantine-react-table.com/docs/guides/column-filtering#alternate-column-filtering-demo

The Gender drop down filter does not work on that table currently, as far as I can tell.

edit: just realized this was about V1, i'll file a separate for V2

[konnsim]

I'm also experiencing an issue with popover mode and filters on:
mantine-react-table v1.3.4
mantine v6.0.21
react/react-dom v18.2.0

My case is similar to ericblade's where the filterVariant: 'select' and filterVariant: 'multi-select' components don't allow for a "selection" and instead close the popover when an item is selected.

The strange thing is I'm only experiencing the issue with touch-based inputs, a client has complained of it on both their iPad and iPhone and I can reproduce the issue in a desktop browser through dev tools by toggling the device toolbar on to turn the cursor into a circle and begin emulating touch inputs. But cursor inputs are working just fine.

This is reproducible on the v1 version of the same table eric linked above using dev-tools.