KevinVandy / material-react-table

A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
https://material-react-table.com
MIT License
1.51k stars 436 forks source link

When selecting "Empty" or "Not Emtpy" with multi-select results in TypeError: selected.map is not a function #1147

Open lod911 opened 4 months ago

lod911 commented 4 months ago

material-react-table version

v2.13.0

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

Hello

I build a list of entries and need to filter of entries without any assignments. So i tried the "Empty" Filter-Entry but it fails.

When setting the filterVariant with MRT_ColumnDef, the DropDown Options "Emtpy" and "Not Empty" doesn't work. The Function gives a ' ' back, but the selected Variable is only checked by the length and ' ' has at least a length of 1...

            multiple: isMultiSelectFilter,
            renderValue: isMultiSelectFilter
              ? (selected: any) =>
                // IMO here should be additionally checked, if the selected value is ' '
                  !selected?.length ? (
                    <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
                  ) : (
                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
                      {(selected as string[])?.map((value) => {
                        const selectedValue = dropdownOptions?.find(
                          (option) => getValueAndLabel(option).value === value,
                        );
                        return (

Im not sure about the source of the Problem, but if you try the reproduction then you see whats my Problem is...

Hope this is a quick fix...I'm not able to get a running clone of the repository where I can step-by-step debug in vs code. So it's hard to tell, how the fix should be...

Can someone fix this?

Regards

Minimal, Reproducible Example - (Optional, but Recommended)

  1. got to apps/material-react-table-docs/examples/customize-filter-modes/sandbox/src/TS.tsx
  2. add at line 22: filterVariant: 'multi-select',
  3. select on the gui at "First Name" from the Filter-DropDown "Empty" or "Not Empty"
  4. Failure

Screenshots or Videos (Optional)

image

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

No, because I do not know how

Terms

lod911 commented 4 months ago

Does anybody have an idea how to solve this? Does it need more information?

reutg commented 1 month ago

@lod911 I am facing the same issue. Did you find the solution?

lod911 commented 1 month ago

@lod911 I am facing the same issue. Did you find the solution?

Yes and No. Never heard from the maintainers, so i created a button with renderTopToolbarCustomActions. By clicking this button, the array for the table-data gets refilled with the necessary selection.

Not nice, but a workaround.