material-react-table 1.0.0-beta.10 → 1.0.0-beta.11

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.11",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,6 +3,7 @@ import React, {
   FC,
   MouseEvent,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 import {
@@ -169,6 +170,12 @@ export const MRT_FilterTextField: FC<Props> = ({
     setAnchorEl(event.currentTarget);
   };
 
+  useEffect(() => {
+    if (column.getFilterValue() === undefined) {
+      handleClear();
+    }
+  }, [column.getFilterValue()]);
+
   if (columnDef.Filter) {
     return <>{columnDef.Filter?.({ column, header, table })}</>;
   }
@@ -315,7 +322,7 @@ export const MRT_FilterTextField: FC<Props> = ({
               ? '120px'
               : 'auto',
           width: '100%',
-          '&	.MuiSelect-icon': {
+          '& .MuiSelect-icon': {
             mr: '1.5rem',
           },
           ...(textFieldProps?.sx instanceof Function

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,4 +1,10 @@
-import React, { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
+import React, {
+  ChangeEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import {
   Collapse,
   debounce,
@@ -32,6 +38,11 @@ export const MRT_GlobalFilterTextField = <
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ table })
+      : muiSearchTextFieldProps;
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
@@ -56,10 +67,11 @@ export const MRT_GlobalFilterTextField = <
     setGlobalFilter(undefined);
   };
 
-  const textFieldProps =
-    muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ table })
-      : muiSearchTextFieldProps;
+  useEffect(() => {
+    if (globalFilter === undefined) {
+      handleClear();
+    }
+  }, [globalFilter]);
 
   return (
     <Collapse