Merge pull request #391 from eddyson-de/more-than-one-filter-bug

More than one filter bug

Author: Fabian Kretzer

lib/FilterHandler.js

@@ -80,16 +80,18 @@ const  withFilterHandler = ComponentToWrap => {
 
         updateFilterConfig(filterFunction, filterComponent, columnName){
             if (columnName !== undefined){
-                let newState = {};
-                if (filterFunction !== undefined){
-                    newState.filterFunctions = Object.assign({}, this.state.filterFunctions);
-                    newState.filterFunctions[columnName] = filterFunction;
-                }
-                if (filterComponent !== undefined){
-                    newState.filterComponents = Object.assign({}, this.state.filterComponents);
-                    newState.filterComponents[columnName] = filterComponent;
-                }
-                this.setState(newState);
+                this.setState((prevState) => {
+                    let newState = {};
+                    if (filterFunction !== undefined){
+                        newState.filterFunctions = Object.assign({}, prevState.filterFunctions);
+                        newState.filterFunctions[columnName] = filterFunction;
+                    }
+                    if (filterComponent !== undefined){
+                        newState.filterComponents = Object.assign({}, prevState.filterComponents);
+                        newState.filterComponents[columnName] = filterComponent;
+                    }
+                    return newState;
+                });
 
             } else {
                 let newState = {};

test/FilterTests.js

@@ -341,4 +341,18 @@ describe('Grid filter tests', function () {
       );
       expect(grid.find("th input").at(0).prop("type")).be.equal("checkbox");
     });
+    
+    it('Should use more than one custom filterFunction', ()=>{
+        let grid = mount(
+            <Grid objects={[{name: "a", age: 1}, {name: "b", age: 2}]} defaultFilter={[{columnName: "name", expression: "a"}]} >
+                <Column name="name" >
+                    <Cell content={()=> <div>FOO</div>}/>
+                    <Filter match={() => false}/>
+                </Column>
+                <Column name="age" >
+                    <Cell content={()=> <div>BAR</div>}/>
+                    <Filter match={() => false}/>
+                </Column>
+            </Grid>);
+    });
 });