Fix transfer search

CHANGELOG.md

@@ -9,6 +9,7 @@
 - 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
 - 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
 - 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
+- 修复 Transfer 搜索功能失效的问题。
 - 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
 
 ## 0.11.2 `2015-01-03`

components/transfer/list.jsx

@@ -78,6 +78,22 @@ class TransferList extends Component {
       [prefixCls + '-with-footer']: !!footerDom,
     });
 
+    const showItems = dataSource.map((item) => {
+      // apply filter
+      const itemText = this.props.render(item);
+      const filterResult = this.matchFilter(itemText, filter);
+      const renderedText = this.props.render(item);
+
+      if (filterResult) {
+        return (
+          <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
+            <Checkbox checked={checkedKeys.some(key => key === item.key)} />
+            {renderedText}
+          </li>
+        );
+      }
+    }).filter(item => !!item);
+
     return <div className={listCls} {...this.props}>
       <div className={`${prefixCls}-header`}>
         {this.renderCheckbox({
@@ -96,24 +112,7 @@ class TransferList extends Component {
         <Animate component="ul"
           transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
           transitionLeave={false}>
-          {dataSource.length > 0 ?
-            dataSource.map((item) => {
-              // apply filter
-              const itemText = this.props.render(item);
-              const filterResult = this.matchFilter(itemText, filter);
-
-              const renderedText = this.props.render(item);
-
-              if (filterResult) {
-                return (
-                  <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
-                    <Checkbox checked={checkedKeys.some(key => key === item.key)} />
-                    {renderedText}
-                  </li>
-                );
-              }
-            }) : <div className={`${prefixCls}-body-not-found`}>Not Found</div>
-          }
+          {showItems.length > 0 ? showItems : <div className={`${prefixCls}-body-not-found`}>Not Found</div>}
         </Animate>
       </div>}
       { footerDom ? <div className={`${prefixCls}-footer`}>

components/transfer/search.jsx

@@ -12,13 +12,18 @@ class Search extends Component {
     this.props.onChange(e);
   }
 
+  handleClear(e) {
+    e.preventDefault();
+    this.props.handleClear(e);
+  }
+
   render() {
     const {placeholder, value, prefixCls} = this.props;
     return <div>
       <input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input"
              onChange={this.handleChange.bind(this)}/>
       { value && value.length > 0 ?
-        <a href="javascirpt:;" className={ prefixCls + '-action' } onClick={this.props.handleClear}>
+        <a href="#" className={ prefixCls + '-action' } onClick={this.handleClear.bind(this)}>
           <Icon type="cross-circle" />
         </a>
         : <span className={ prefixCls + '-action' }><Icon type="search" /></span>
@@ -30,12 +35,14 @@ class Search extends Component {
 Search.defaultProps = {
   placeholder: '请输入搜索内容',
   onChange: noop,
+  handleClear: noop,
 };
 
 Search.propTypes = {
   prefixCls: PropTypes.string,
   placeholder: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  handleClear: PropTypes.func,
 };
 
 export default Search;