feat: filterSort add search value param (#1051)

react-component · Jun 7, 2024 · b9e759f · b9e759f
1 parent 33bd6d7
commit b9e759f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/Select.tsx b/src/Select.tsx
@@ -137,7 +137,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
    * It's by design.
    */
   filterOption?: boolean | FilterFunc<OptionType>;
-  filterSort?: (optionA: OptionType, optionB: OptionType) => number;
+  filterSort?: (optionA: OptionType, optionB: OptionType, info: { searchValue: string }) => number;
   optionFilterProp?: string;
   optionLabelProp?: string;
   children?: React.ReactNode;
@@ -437,8 +437,10 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         return filledSearchOptions;
       }
 
-      return [...filledSearchOptions].sort((a, b) => filterSort(a, b));
-    }, [filledSearchOptions, filterSort]);
+      return [...filledSearchOptions].sort((a, b) =>
+        filterSort(a, b, { searchValue: mergedSearchValue }),
+      );
+    }, [filledSearchOptions, filterSort, mergedSearchValue]);
 
     const displayOptions = React.useMemo(
       () =>

diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
@@ -1917,6 +1917,35 @@ describe('Select.Basic', () => {
     );
   });
 
+  it('filterSort should work with search value', () => {
+    const { container } = render(
+      <Select
+        showSearch
+        filterSort={(optionA, optionB, { searchValue }) => {
+          const i =
+            (optionA.label as string).indexOf(searchValue) -
+            (optionB.label as string).indexOf(searchValue);
+          if (i == 0) {
+            return (optionA.label as string).localeCompare(optionB.label as string);
+          }
+          return i;
+        }}
+        optionFilterProp="label"
+        options={[
+          { value: 4, label: 'Not Identified' },
+          { value: 3, label: 'Closed' },
+          { value: 2, label: 'Communicated' },
+          { value: 5, label: 'Cancelled' },
+        ]}
+      />,
+    );
+
+    fireEvent.change(container.querySelector('input'), { target: { value: 'o' } });
+    expect(container.querySelector('.rc-select-item-option-content').textContent).toBe(
+      'Communicated',
+    );
+  });
+
   it('correctly handles the `tabIndex` prop', () => {
     const { container } = render(<Select tabIndex={0} />);
     expect(container.querySelector('.rc-select').getAttribute('tabindex')).toBeFalsy();