Skip to content

Commit

Permalink
[DataGrid] Fix filtering with boolean column type (#15252)
Browse files Browse the repository at this point in the history
Co-authored-by: Armin Mehinovic <[email protected]>
  • Loading branch information
k-rajat19 and arminmeh authored Nov 4, 2024
1 parent 471ce00 commit eb2cae5
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 12 deletions.
13 changes: 7 additions & 6 deletions packages/x-data-grid/src/colDef/gridBooleanOperators.ts
Original file line number Diff line number Diff line change
@@ -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,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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();
Expand All @@ -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');
Expand All @@ -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}
Expand Down
14 changes: 13 additions & 1 deletion packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
});

Expand Down
1 change: 1 addition & 0 deletions scripts/x-data-grid-premium.exports.json
Original file line number Diff line number Diff line change
Expand Up @@ -660,6 +660,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" },
Expand Down
1 change: 1 addition & 0 deletions scripts/x-data-grid-pro.exports.json
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,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" },
Expand Down
1 change: 1 addition & 0 deletions scripts/x-data-grid.exports.json
Original file line number Diff line number Diff line change
Expand Up @@ -558,6 +558,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" },
Expand Down

0 comments on commit eb2cae5

Please sign in to comment.