Skip to content

Commit b9e759f

Browse files
authored
feat: filterSort add search value param (#1051)
1 parent 33bd6d7 commit b9e759f

File tree

2 files changed

+34
-3
lines changed

2 files changed

+34
-3
lines changed

src/Select.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
137137
* It's by design.
138138
*/
139139
filterOption?: boolean | FilterFunc<OptionType>;
140-
filterSort?: (optionA: OptionType, optionB: OptionType) => number;
140+
filterSort?: (optionA: OptionType, optionB: OptionType, info: { searchValue: string }) => number;
141141
optionFilterProp?: string;
142142
optionLabelProp?: string;
143143
children?: React.ReactNode;
@@ -437,8 +437,10 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
437437
return filledSearchOptions;
438438
}
439439

440-
return [...filledSearchOptions].sort((a, b) => filterSort(a, b));
441-
}, [filledSearchOptions, filterSort]);
440+
return [...filledSearchOptions].sort((a, b) =>
441+
filterSort(a, b, { searchValue: mergedSearchValue }),
442+
);
443+
}, [filledSearchOptions, filterSort, mergedSearchValue]);
442444

443445
const displayOptions = React.useMemo(
444446
() =>

tests/Select.test.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1917,6 +1917,35 @@ describe('Select.Basic', () => {
19171917
);
19181918
});
19191919

1920+
it('filterSort should work with search value', () => {
1921+
const { container } = render(
1922+
<Select
1923+
showSearch
1924+
filterSort={(optionA, optionB, { searchValue }) => {
1925+
const i =
1926+
(optionA.label as string).indexOf(searchValue) -
1927+
(optionB.label as string).indexOf(searchValue);
1928+
if (i == 0) {
1929+
return (optionA.label as string).localeCompare(optionB.label as string);
1930+
}
1931+
return i;
1932+
}}
1933+
optionFilterProp="label"
1934+
options={[
1935+
{ value: 4, label: 'Not Identified' },
1936+
{ value: 3, label: 'Closed' },
1937+
{ value: 2, label: 'Communicated' },
1938+
{ value: 5, label: 'Cancelled' },
1939+
]}
1940+
/>,
1941+
);
1942+
1943+
fireEvent.change(container.querySelector('input'), { target: { value: 'o' } });
1944+
expect(container.querySelector('.rc-select-item-option-content').textContent).toBe(
1945+
'Communicated',
1946+
);
1947+
});
1948+
19201949
it('correctly handles the `tabIndex` prop', () => {
19211950
const { container } = render(<Select tabIndex={0} />);
19221951
expect(container.querySelector('.rc-select').getAttribute('tabindex')).toBeFalsy();

0 commit comments

Comments
 (0)