fix #1445

Author: AllenFang

src/filters/Text.js

@@ -6,26 +6,30 @@ class TextFilter extends Component {
     super(props);
     this.filter = this.filter.bind(this);
     this.timeout = null;
+    this.state = {
+      value: this.props.defaultValue || ''
+    };
   }
 
   filter(event) {
     if (this.timeout) {
       clearTimeout(this.timeout);
     }
     const filterValue = event.target.value;
+    this.setState(() => { return { value: filterValue }; });
     this.timeout = setTimeout(() => {
       this.props.filterHandler(filterValue, Const.FILTER_TYPE.TEXT);
     }, this.props.delay);
   }
 
   cleanFiltered() {
     const value = this.props.defaultValue ? this.props.defaultValue : '';
-    this.refs.inputText.value = value;
+    this.setState(() => { return { value }; });
     this.props.filterHandler(value, Const.FILTER_TYPE.TEXT);
   }
 
   applyFilter(filterText) {
-    this.refs.inputText.value = filterText;
+    this.setState(() => { return { value: filterText }; });
     this.props.filterHandler(filterText, Const.FILTER_TYPE.TEXT);
   }
 
@@ -36,20 +40,26 @@ class TextFilter extends Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.defaultValue !== this.props.defaultValue) {
+      this.applyFilter(nextProps.defaultValue || '');
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this.timeout);
   }
 
   render() {
-    const { placeholder, columnName, defaultValue, style } = this.props;
+    const { placeholder, columnName, style } = this.props;
     return (
       <input ref='inputText'
         className='filter text-filter form-control'
         type='text'
         style={ style }
         onChange={ this.filter }
         placeholder={ placeholder || `Enter ${columnName}...` }
-        defaultValue={ defaultValue ? defaultValue : '' } />
+        value={ this.state.value } />
     );
   }
 }