diff --git a/components/input/Search.tsx b/components/input/Search.tsx index 17083081293a..eec4218d5bab 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -18,6 +18,9 @@ export interface SearchProps extends InputProps { | React.ChangeEvent | React.MouseEvent | React.KeyboardEvent, + info?: { + source?: 'clear' | 'input'; + }, ) => void; enterButton?: React.ReactNode; loading?: boolean; @@ -55,7 +58,9 @@ const Search = React.forwardRef((props, ref) => { const onChange = (e: React.ChangeEvent) => { if (e && e.target && e.type === 'click' && customOnSearch) { - customOnSearch((e as React.ChangeEvent).target.value, e); + customOnSearch((e as React.ChangeEvent).target.value, e, { + source: 'clear', + }); } if (customOnChange) { customOnChange(e); @@ -70,7 +75,9 @@ const Search = React.forwardRef((props, ref) => { const onSearch = (e: React.MouseEvent | React.KeyboardEvent) => { if (customOnSearch) { - customOnSearch(inputRef.current?.input?.value!, e); + customOnSearch(inputRef.current?.input?.value!, e, { + source: 'input', + }); } }; diff --git a/components/input/__tests__/Search.test.tsx b/components/input/__tests__/Search.test.tsx index 028dcb510ead..b81e1a7cb924 100644 --- a/components/input/__tests__/Search.test.tsx +++ b/components/input/__tests__/Search.test.tsx @@ -52,7 +52,7 @@ describe('Input.Search', () => { const { container } = render(); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); - expect(onSearch).toHaveBeenCalledWith('search text', expect.anything()); + expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button', () => { @@ -62,7 +62,7 @@ describe('Input.Search', () => { ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); - expect(onSearch).toHaveBeenCalledWith('search text', expect.anything()); + expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button with text', () => { @@ -72,7 +72,7 @@ describe('Input.Search', () => { ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); - expect(onSearch).toHaveBeenCalledWith('search text', expect.anything()); + expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button with customize button', () => { @@ -86,7 +86,7 @@ describe('Input.Search', () => { ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); - expect(onSearch).toHaveBeenCalledWith('search text', expect.anything()); + expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button of native', () => { @@ -105,7 +105,7 @@ describe('Input.Search', () => { ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); - expect(onSearch).toHaveBeenCalledWith('search text', expect.anything()); + expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); expect(onButtonClick).toHaveBeenCalledTimes(1); }); @@ -114,7 +114,7 @@ describe('Input.Search', () => { const { container } = render(); fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 }); expect(onSearch).toHaveBeenCalledTimes(1); - expect(onSearch).toHaveBeenCalledWith('search text', expect.anything()); + expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); // https://github.com/ant-design/ant-design/issues/34844 @@ -128,7 +128,7 @@ describe('Input.Search', () => { fireEvent.compositionEnd(container.querySelector('input')!); fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 }); expect(onSearch).toHaveBeenCalledTimes(1); - expect(onSearch).toHaveBeenCalledWith('search text', expect.anything()); + expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); // https://github.com/ant-design/ant-design/issues/14785 @@ -150,7 +150,7 @@ describe('Input.Search', () => { , ); fireEvent.click(container.querySelector('.ant-input-clear-icon')!); - expect(onSearch).toHaveBeenLastCalledWith('', expect.anything()); + expect(onSearch).toHaveBeenLastCalledWith('', expect.anything(), { source: 'clear' }); expect(onChange).toHaveBeenCalled(); }); diff --git a/components/input/demo/search-input.tsx b/components/input/demo/search-input.tsx index 8e4d4e6bb05a..e2332eebeed0 100644 --- a/components/input/demo/search-input.tsx +++ b/components/input/demo/search-input.tsx @@ -1,6 +1,7 @@ import { AudioOutlined } from '@ant-design/icons'; import React from 'react'; import { Input, Space } from 'antd'; +import type { SearchProps } from '../Search'; const { Search } = Input; @@ -13,7 +14,7 @@ const suffix = ( /> ); -const onSearch = (value: string) => console.log(value); +const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value); const App: React.FC = () => ( diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index 120154e47e60..b91c5c005a4f 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -97,7 +97,7 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea | --- | --- | --- | --- | | enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false | | loading | Search box with loading | boolean | false | -| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - | +| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event, { source: "input" \| "clear" }) | - | Supports all props of `Input`. diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 21f46a9e0ead..3c6381b780d7 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -98,7 +98,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el | --- | --- | --- | --- | | enterButton | 是否有确认按钮,可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false | | loading | 搜索 loading | boolean | false | -| onSearch | 点击搜索图标、清除图标,或按下回车键时的回调 | function(value, event) | - | +| onSearch | 点击搜索图标、清除图标,或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - | 其余属性和 Input 一致。