diff --git a/components/transfer/__tests__/search.test.tsx b/components/transfer/__tests__/search.test.tsx
index cf7ac774873b..69f51c8407e8 100644
--- a/components/transfer/__tests__/search.test.tsx
+++ b/components/transfer/__tests__/search.test.tsx
@@ -85,4 +85,49 @@ describe('Transfer.Search', () => {
expect(filterOption).toHaveBeenCalledTimes(dataSource.length);
});
+
+ it('The filterOption parameter is correct when use input in search box', () => {
+ const filterOption = jest.fn();
+
+ const { container } = testLibRender(
+ ,
+ );
+
+ fireEvent.change(
+ container
+ ?.querySelectorAll('.ant-transfer-list')
+ ?.item(0)
+ ?.querySelector('input[type="text"]')!,
+ { target: { value: 'a' } },
+ );
+ expect(filterOption).toHaveBeenNthCalledWith(
+ 1,
+ 'a',
+ { key: 'a', title: 'a', description: 'a' },
+ 'left',
+ );
+ expect(filterOption).toHaveBeenLastCalledWith(
+ 'a',
+ { key: 'c', title: 'c', description: 'c' },
+ 'left',
+ );
+ filterOption.mockReset();
+ fireEvent.change(
+ container
+ ?.querySelectorAll('.ant-transfer-list')
+ ?.item(1)
+ ?.querySelector('input[type="text"]')!,
+ { target: { value: 'b' } },
+ );
+ expect(filterOption).toHaveBeenCalledWith(
+ 'b',
+ { key: 'b', title: 'b', description: 'b' },
+ 'right',
+ );
+ });
});
diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md
index 9d2931b68505..2455c1b67cb3 100644
--- a/components/transfer/index.en-US.md
+++ b/components/transfer/index.en-US.md
@@ -43,7 +43,7 @@ Common props ref:[Common props](/docs/react/common-props)
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop | [RecordType extends TransferItem = TransferItem](https://github.com/ant-design/ant-design/blob/1bf0bab2a7bc0a774119f501806e3e0e3a6ba283/components/transfer/index.tsx#L12)\[] | \[] | |
| disabled | Whether disabled transfer | boolean | false | |
| selectionsIcon | custom dropdown icon | React.ReactNode | | 5.8.0 |
-| filterOption | A function to determine whether an item should show in search result list, only works when searching | (inputValue, option): boolean | - | |
+| filterOption | A function to determine whether an item should show in search result list, only works when searching, (add `direction` support since 5.9.0+) | (inputValue, option, direction: `left` \| `right`): boolean | - | |
| footer | A function used for rendering the footer | (props, { direction }) => ReactNode | - | direction: 4.17.0 |
| listStyle | A custom CSS style used for rendering the transfer columns | object \| ({direction: `left` \| `right`}) => object | - | |
| locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; } | { itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` } | |
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index 4839f72e5fc9..bc8401dd9c95 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -90,7 +90,7 @@ export interface TransferProps {
titles?: React.ReactNode[];
operations?: string[];
showSearch?: boolean;
- filterOption?: (inputValue: string, item: RecordType) => boolean;
+ filterOption?: (inputValue: string, item: RecordType, direction: TransferDirection) => boolean;
locale?: Partial;
footer?: (
props: TransferListProps,
diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md
index 4a61c6304be3..a06ab72715a7 100644
--- a/components/transfer/index.zh-CN.md
+++ b/components/transfer/index.zh-CN.md
@@ -46,7 +46,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yv12S4sSRAEAAA
| dataSource | 数据源,其中的数据将会被渲染到左边一栏中,`targetKeys` 中指定的除外 | [RecordType extends TransferItem = TransferItem](https://github.com/ant-design/ant-design/blob/1bf0bab2a7bc0a774119f501806e3e0e3a6ba283/components/transfer/index.tsx#L12)\[] | \[] | |
| disabled | 是否禁用 | boolean | false | |
| selectionsIcon | 自定义下拉菜单图标 | React.ReactNode | | 5.8.0 |
-| filterOption | 根据搜索内容进行筛选,接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 true,反之则返回 false | (inputValue, option): boolean | - | |
+| filterOption | 根据搜索内容进行筛选,接收 `inputValue` `option` `direction` 三个参数,(`direction` 自5.9.0+支持),当 `option` 符合筛选条件时,应返回 true,反之则返回 false | (inputValue, option, direction: `left` \| `right`): boolean | - | |
| footer | 底部渲染函数 | (props, { direction }) => ReactNode | - | direction: 4.17.0 |
| listStyle | 两个穿梭框的自定义样式 | object\|({direction: `left` \| `right`}) => object | - | |
| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; } | { itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` } | |
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index e076024acb69..80e28caba9f4 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -48,7 +48,7 @@ export interface TransferListProps extends TransferLocale {
prefixCls: string;
titleText: React.ReactNode;
dataSource: RecordType[];
- filterOption?: (filterText: string, item: RecordType) => boolean;
+ filterOption?: (filterText: string, item: RecordType, direction: TransferDirection) => boolean;
style?: React.CSSProperties;
checkedKeys: string[];
handleFilter: (e: React.ChangeEvent) => void;
@@ -128,7 +128,7 @@ const TransferList = (
const matchFilter = (text: string, item: RecordType) => {
if (filterOption) {
- return filterOption(filterValue, item);
+ return filterOption(filterValue, item, direction);
}
return text.includes(filterValue);
};