diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx index d222c524f..b2dffcf02 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx @@ -205,15 +205,14 @@ export const MRT_FilterTextInput = ({ } }; - if (columnDef.Filter) { - return ( - <>{columnDef.Filter?.({ column, header, rangeFilterIndex, table })} - ); - } - const handleClearEmptyFilterChip = () => { - setFilterValue(''); - column.setFilterValue(undefined); + if (isMultiSelectFilter) { + setFilterValue([]); + column.setFilterValue([]); + } else { + setFilterValue(''); + column.setFilterValue(undefined); + } setColumnFilterFns((prev) => ({ ...prev, [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy', @@ -245,7 +244,8 @@ export const MRT_FilterTextInput = ({ : textInputProps?.style), }, title: filterPlaceholder, - value: isMultiSelectFilter && !Array.isArray(filterValue) ? [] : filterValue, + value: + isMultiSelectFilter && !Array.isArray(filterValue) ? [] : filterValue, variant: 'unstyled', } as const; @@ -262,103 +262,129 @@ export const MRT_FilterTextInput = ({ ) : null; - return filterChipLabel ? ( - - - {filterChipLabel} - - - ) : isMultiSelectFilter ? ( - setFilterValue(value)} - ref={(node) => { - if (node) { - filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = - node; - if (multiSelectProps.ref) { - multiSelectProps.ref.current = node; + if (columnDef.Filter) { + return ( + <>{columnDef.Filter?.({ column, header, rangeFilterIndex, table })} + ); + } + + if (filterChipLabel) { + return ( + + + {filterChipLabel} + + + ); + } + + if (isMultiSelectFilter) { + return ( + setFilterValue(value)} + ref={(node) => { + if (node) { + filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = + node; + if (multiSelectProps.ref) { + multiSelectProps.ref.current = node; + } } + }} + rightSection={ + filterValue?.toString()?.length && multiSelectProps?.clearable + ? ClearButton + : undefined } - }} - rightSection={ - filterValue?.toString()?.length && multiSelectProps?.clearable - ? ClearButton - : undefined - } - style={commonProps.style} - /> - ) : isSelectFilter ? ( - { + if (node) { + filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = + node; + if (selectProps.ref) { + selectProps.ref.current = node; + } } - } - }} - style={commonProps.style} - /> - ) : isDateFilter ? ( - commonProps.onChange(event === null ? '' : event)} - ref={(node) => { - if (node) { - filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = - node; - if (dateInputProps.ref) { - dateInputProps.ref.current = node; + }} + style={commonProps.style} + /> + ); + } + + if (isDateFilter) { + return ( + commonProps.onChange(event === null ? '' : event)} + ref={(node) => { + if (node) { + filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = + node; + if (dateInputProps.ref) { + dateInputProps.ref.current = node; + } } - } - }} - style={commonProps.style} - /> - ) : isAutoCompleteFilter ? ( - setFilterValue(value)} - rightSection={filterValue?.toString()?.length ? ClearButton : undefined} - {...autoCompleteProps} - className={clsx(className, autoCompleteProps.className)} - data={filterSelectOptions} - ref={(node) => { - if (node) { - filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = - node; - if (autoCompleteProps.ref) { - autoCompleteProps.ref.current = node; + }} + style={commonProps.style} + /> + ); + } + + if (isAutoCompleteFilter) { + return ( + setFilterValue(value)} + rightSection={filterValue?.toString()?.length ? ClearButton : undefined} + {...autoCompleteProps} + className={clsx(className, autoCompleteProps.className)} + data={filterSelectOptions} + ref={(node) => { + if (node) { + filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = + node; + if (autoCompleteProps.ref) { + autoCompleteProps.ref.current = node; + } } - } - }} - style={commonProps.style} - /> - ) : ( + }} + style={commonProps.style} + /> + ); + } + + return ( setFilterValue(e.target.value)} diff --git a/packages/mantine-react-table/stories/fixed-bugs/filtering.stories.tsx b/packages/mantine-react-table/stories/fixed-bugs/filtering.stories.tsx index b64745683..766305b97 100644 --- a/packages/mantine-react-table/stories/fixed-bugs/filtering.stories.tsx +++ b/packages/mantine-react-table/stories/fixed-bugs/filtering.stories.tsx @@ -19,7 +19,7 @@ export const SwitchFromEmptyToEqualsArray = () => ( accessorKey: 'state', header: 'State', filterVariant: 'multi-select', - columnFilterModeOptions: ['equals', 'empty'], + columnFilterModeOptions: ['equals', 'empty', 'notEmpty'], mantineFilterMultiSelectProps: { data: ["Wyoming", "Delaware", "South Dakota", "Vermont", "Rhode Island"] }