[DataGrid] Fix filtering with boolean column type (@k-rajat19)

packages/x-data-grid/src/colDef/gridBooleanOperators.ts

@@ -1,19 +1,20 @@
-import { GridFilterInputBoolean } from '../components/panel/filterPanel/GridFilterInputBoolean';
+import {
+  GridFilterInputBoolean,
+  sanitizeFilterItemValue,
+} from '../components/panel/filterPanel/GridFilterInputBoolean';
 import { GridFilterItem } from '../models/gridFilterItem';
 import { GridFilterOperator } from '../models/gridFilterOperator';
 
 export const getGridBooleanOperators = (): GridFilterOperator<any, boolean | null, any>[] => [
   {
     value: 'is',
     getApplyFilterFn: (filterItem: GridFilterItem) => {
-      if (!filterItem.value) {
+      const sanitizedValue = sanitizeFilterItemValue(filterItem.value);
+      if (sanitizedValue === undefined) {
         return null;
       }
 
-      const valueAsBoolean = String(filterItem.value) === 'true';
-      return (value): boolean => {
-        return Boolean(value) === valueAsBoolean;
-      };
+      return (value): boolean => Boolean(value) === sanitizedValue;
     },
     InputComponent: GridFilterInputBoolean,
   },

packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx

@@ -16,6 +16,16 @@ export type GridFilterInputBooleanProps = GridFilterInputValueProps &
     isFilterActive?: boolean;
   };
 
+export const sanitizeFilterItemValue = (value: any): boolean | undefined => {
+  if (String(value).toLowerCase() === 'true') {
+    return true;
+  }
+  if (String(value).toLowerCase() === 'false') {
+    return false;
+  }
+  return undefined;
+};
+
 const BooleanOperatorContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -39,7 +49,9 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     InputLabelProps,
     ...others
   } = props;
-  const [filterValueState, setFilterValueState] = React.useState(item.value || '');
+  const [filterValueState, setFilterValueState] = React.useState<boolean | undefined>(
+    sanitizeFilterItemValue(item.value),
+  );
   const rootProps = useGridRootProps();
 
   const labelId = useId();
@@ -52,15 +64,16 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
 
   const onFilterChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
+      const value = sanitizeFilterItemValue(event.target.value);
       setFilterValueState(value);
-      applyValue({ ...item, value: Boolean(value) });
+
+      applyValue({ ...item, value });
     },
     [applyValue, item],
   );
 
   React.useEffect(() => {
-    setFilterValueState(item.value || '');
+    setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
 
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
@@ -80,7 +93,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           labelId={labelId}
           id={selectId}
           label={label}
-          value={filterValueState}
+          value={filterValueState === undefined ? '' : String(filterValueState)}
           onChange={onFilterChange}
           variant={variant}
           notched={variant === 'outlined' ? true : undefined}

packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx

@@ -1112,11 +1112,23 @@ describe('<DataGrid /> - Filter', () => {
     };
 
     const ALL_ROWS = ['undefined', 'null', 'true', 'false'];
+    const TRUTHY_ROWS = ['true'];
+    const FALSY_ROWS = ['undefined', 'null', 'false'];
 
     it('should filter with operator "is"', () => {
-      expect(getRows({ operator: 'is', value: 'true' })).to.deep.equal(['true']);
+      expect(getRows({ operator: 'is', value: 'TRUE' })).to.deep.equal(TRUTHY_ROWS);
+      expect(getRows({ operator: 'is', value: 'True' })).to.deep.equal(TRUTHY_ROWS);
+      expect(getRows({ operator: 'is', value: 'true' })).to.deep.equal(TRUTHY_ROWS);
+      expect(getRows({ operator: 'is', value: true })).to.deep.equal(TRUTHY_ROWS);
+
+      expect(getRows({ operator: 'is', value: 'FALSE' })).to.deep.equal(FALSY_ROWS);
+      expect(getRows({ operator: 'is', value: 'False' })).to.deep.equal(FALSY_ROWS);
+      expect(getRows({ operator: 'is', value: 'false' })).to.deep.equal(FALSY_ROWS);
+      expect(getRows({ operator: 'is', value: false })).to.deep.equal(FALSY_ROWS);
+
       expect(getRows({ operator: 'is', value: '' })).to.deep.equal(ALL_ROWS);
       expect(getRows({ operator: 'is', value: undefined })).to.deep.equal(ALL_ROWS);
+      expect(getRows({ operator: 'is', value: 'test' })).to.deep.equal(ALL_ROWS); // Ignores invalid values
     });
   });
 

scripts/x-data-grid-premium.exports.json

@@ -658,6 +658,7 @@
   { "name": "renderEditSingleSelectCell", "kind": "Variable" },
   { "name": "renderRowReorderCell", "kind": "Variable" },
   { "name": "RowPropsOverrides", "kind": "Interface" },
+  { "name": "sanitizeFilterItemValue", "kind": "Variable" },
   { "name": "selectedGridRowsCountSelector", "kind": "Variable" },
   { "name": "selectedGridRowsSelector", "kind": "Variable" },
   { "name": "selectedIdsLookupSelector", "kind": "Variable" },

scripts/x-data-grid-pro.exports.json

@@ -609,6 +609,7 @@
   { "name": "renderEditSingleSelectCell", "kind": "Variable" },
   { "name": "renderRowReorderCell", "kind": "Variable" },
   { "name": "RowPropsOverrides", "kind": "Interface" },
+  { "name": "sanitizeFilterItemValue", "kind": "Variable" },
   { "name": "selectedGridRowsCountSelector", "kind": "Variable" },
   { "name": "selectedGridRowsSelector", "kind": "Variable" },
   { "name": "selectedIdsLookupSelector", "kind": "Variable" },

scripts/x-data-grid.exports.json

@@ -556,6 +556,7 @@
   { "name": "renderEditInputCell", "kind": "Variable" },
   { "name": "renderEditSingleSelectCell", "kind": "Variable" },
   { "name": "RowPropsOverrides", "kind": "Interface" },
+  { "name": "sanitizeFilterItemValue", "kind": "Variable" },
   { "name": "selectedGridRowsCountSelector", "kind": "Variable" },
   { "name": "selectedGridRowsSelector", "kind": "Variable" },
   { "name": "selectedIdsLookupSelector", "kind": "Variable" },