Search icon could be clicked, close #10634

components/input/Search.tsx

@@ -41,31 +41,31 @@ export default class Search extends React.Component<SearchProps, any> {
 
   getButtonOrIcon() {
     const { enterButton, prefixCls, size, disabled } = this.props;
-    if (!enterButton) {
-      return <Icon className={`${prefixCls}-icon`} type="search" key="searchIcon" />;
-    }
     const enterButtonAsElement = enterButton as React.ReactElement<any>;
-    if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
-      return React.cloneElement(enterButtonAsElement, enterButtonAsElement.type === Button ? {
+    let node;
+    if (!enterButton) {
+      node = <Icon className={`${prefixCls}-icon`} type="search" key="searchIcon" />;
+    } else if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
+      node = React.cloneElement(enterButtonAsElement, enterButtonAsElement.type === Button ? {
         className: `${prefixCls}-button`,
         size,
-        onClick: this.onSearch,
-      } : {
-        onClick: this.onSearch,
-      });
+      } : {});
+    } else {
+      node = (
+        <Button
+          className={`${prefixCls}-button`}
+          type="primary"
+          size={size}
+          disabled={disabled}
+          key="enterButton"
+        >
+          {enterButton === true ? <Icon type="search" /> : enterButton}
+        </Button>
+      );
     }
-    return (
-      <Button
-        className={`${prefixCls}-button`}
-        type="primary"
-        size={size}
-        disabled={disabled}
-        onClick={this.onSearch}
-        key="enterButton"
-      >
-        {enterButton === true ? <Icon type="search" /> : enterButton}
-      </Button>
-    );
+    return React.cloneElement(node, {
+      onClick: this.onSearch,
+    });
   }
 
   render() {

components/input/__tests__/Search.test.js

@@ -27,4 +27,54 @@ describe('Input.Search', () => {
     );
     expect(wrapper.find('.ant-btn-primary[disabled]')).toHaveLength(1);
   });
+
+  it('should trigger onSearch when click search icon', () => {
+    const onSearch = jest.fn();
+    const wrapper = mount(
+      <Search defaultValue="search text" onSearch={onSearch} />
+    );
+    wrapper.find('Icon').simulate('click');
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('search text');
+  });
+
+  it('should trigger onSearch when click search button', () => {
+    const onSearch = jest.fn();
+    const wrapper = mount(
+      <Search defaultValue="search text" enterButton onSearch={onSearch} />
+    );
+    wrapper.find('Button').simulate('click');
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('search text');
+  });
+
+  it('should trigger onSearch when click search button with text', () => {
+    const onSearch = jest.fn();
+    const wrapper = mount(
+      <Search defaultValue="search text" enterButton="button text" onSearch={onSearch} />
+    );
+    wrapper.find('Button').simulate('click');
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('search text');
+  });
+
+  it('should trigger onSearch when click search button with customize button', () => {
+    const onSearch = jest.fn();
+    const wrapper = mount(
+      <Search defaultValue="search text" enterButton={<Button>antd button</Button>} onSearch={onSearch} />
+    );
+    wrapper.find('Button').simulate('click');
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('search text');
+  });
+
+  it('should trigger onSearch when click search button of native', () => {
+    const onSearch = jest.fn();
+    const wrapper = mount(
+      <Search defaultValue="search text" enterButton={<button>antd button</button>} onSearch={onSearch} />
+    );
+    wrapper.find('button').simulate('click');
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('search text');
+  });
 });

components/input/demo/search-input.md

@@ -31,7 +31,12 @@ ReactDOM.render(
       enterButton
     />
     <br /><br />
-    <Search placeholder="input search text" enterButton="Search" size="large" />
+    <Search
+      placeholder="input search text"
+      enterButton="Search"
+      size="large"
+      onSearch={value => console.log(value)}
+    />
   </div>
 , mountNode);
 ````

components/input/style/search-input.less

@@ -7,8 +7,12 @@
 
 .@{search-prefix} {
   &-icon {
-    pointer-events: none;
     color: @text-color-secondary;
+    cursor: pointer;
+    transition: all .3s;
+    &:hover {
+      color: #333;
+    }
   }
 
   &:not(&-small) > .@{ant-prefix}-input-suffix {