fix clear menu item instead of remove

KevinVandy · Jan 5, 2024 · 8f008f6 · 8f008f6
1 parent a8fb70c
commit 8f008f6
Showing 1 changed file with 25 additions and 20 deletions.
diff --git a/packages/material-react-table/src/menus/MRT_ColumnActionMenu.tsx b/packages/material-react-table/src/menus/MRT_ColumnActionMenu.tsx
@@ -67,6 +67,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
+    setColumnFilterFns,
     setColumnOrder,
     setColumnSizingInfo,
     setShowColumnFilters,
@@ -119,8 +120,14 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   };
 
   const handleClearFilter = () => {
-    column.setFilterValue('');
+    column.setFilterValue(undefined);
     setAnchorEl(null);
+    if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+      setColumnFilterFns((prev) => ({
+        ...prev,
+        [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy',
+      }));
+    }
   };
 
   const handleFilterByColumn = () => {
@@ -206,25 +213,23 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       : []),
     ...(enableColumnFilters && column.getCanFilter()
       ? [
-          !['empty', 'notEmpty'].includes(columnDef._filterFn) && (
-            <MenuItem
-              disabled={
-                !columnFilterValue ||
-                (Array.isArray(columnFilterValue) &&
-                  !columnFilterValue.filter((value) => value).length)
-              }
-              key={3}
-              onClick={handleClearFilter}
-              sx={commonMenuItemStyles}
-            >
-              <Box sx={commonListItemStyles}>
-                <ListItemIcon>
-                  <FilterListOffIcon />
-                </ListItemIcon>
-                {localization.clearFilter}
-              </Box>
-            </MenuItem>
-          ),
+          <MenuItem
+            disabled={
+              !columnFilterValue ||
+              (Array.isArray(columnFilterValue) &&
+                !columnFilterValue.filter((value) => value).length)
+            }
+            key={3}
+            onClick={handleClearFilter}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <ListItemIcon>
+                <FilterListOffIcon />
+              </ListItemIcon>
+              {localization.clearFilter}
+            </Box>
+          </MenuItem>,
           columnFilterDisplayMode === 'subheader' && (
             <MenuItem
               disabled={showColumnFilters && !enableColumnFilterModes}