feat: add activeOptionFilter prop and update combobox examples

README.md

@@ -132,6 +132,7 @@ export default () => (
 | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
 | optionRender | Custom rendering options | (oriOption: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - |
 | labelRender  | Custom rendering label   |  (props: LabelInValueType) => React.ReactNode   | - |
+| activeOptionFilter | Custom filter function for active option when searching. | (searchValue: string, option: OptionType) => boolean | - |
 | maxCount | The max number of items can be selected | number | - |
 
 ### Methods

docs/examples/combobox.tsx

@@ -150,6 +150,40 @@ class Combobox extends React.Component {
             options={this.state.options}
             onChange={this.onAsyncChange}
           />
+
+          <h3>Active Option Filter - Middle Match</h3>
+          <Select
+            style={{ width: 500 }}
+            showSearch
+            allowClear
+            mode="combobox"
+            placeholder="Search value can be matched anywhere in the option's value. Try input 'ran'"
+            activeOptionFilter={(searchValue, option) => {
+              return String(option.value).includes(searchValue);
+            }}
+          >
+            {['apple', 'banana', 'orange', 'grape'].map((i) => (
+              <Option value={i} key={i}>
+                {i}
+              </Option>
+            ))}
+          </Select>
+
+          <h3>No Active Highlight</h3>
+          <Select
+            style={{ width: 500 }}
+            showSearch
+            allowClear
+            mode="combobox"
+            placeholder="No option will be actively highlighted."
+            activeOptionFilter={() => false}
+          >
+            {['apple', 'banana', 'orange', 'grape'].map((i) => (
+              <Option value={i} key={i}>
+                {i}
+              </Option>
+            ))}
+          </Select>
         </div>
       </div>
     );

src/OptionList.tsx

@@ -60,6 +60,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     listHeight,
     listItemHeight,
     optionRender,
+    activeOptionFilter,
     classNames: contextClassNames,
     styles: contextStyles,
   } = React.useContext(SelectContext);
@@ -159,9 +160,12 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     if (!multiple && open && rawValues.size === 1) {
       const value: RawValueType = Array.from(rawValues)[0];
       // Scroll to the option closest to the searchValue if searching.
-      const index = memoFlattenOptions.findIndex(({ data }) =>
-        searchValue ? String(data.value).startsWith(searchValue) : data.value === value,
-      );
+      const index = memoFlattenOptions.findIndex(({ data }) => {
+        if (activeOptionFilter) {
+          return activeOptionFilter(searchValue, data);
+        }
+        return searchValue ? String(data.value).startsWith(searchValue) : data.value === value;
+      });
 
       if (index !== -1) {
         setActive(index);

src/Select.tsx

@@ -151,6 +151,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   listHeight?: number;
   listItemHeight?: number;
   labelRender?: (props: LabelInValueType) => React.ReactNode;
+  activeOptionFilter?: (searchValue: string, option: OptionType) => boolean;
 
   // >>> Icon
   menuItemSelectedIcon?: RenderNode;
@@ -213,6 +214,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       maxCount,
       classNames,
       styles,
+      activeOptionFilter,
       ...restProps
     } = props;
 
@@ -647,6 +649,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         optionRender,
         classNames,
         styles,
+        activeOptionFilter,
       };
     }, [
       maxCount,
@@ -667,6 +670,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       optionRender,
       classNames,
       styles,
+      activeOptionFilter,
     ]);
 
     // ========================== Warning ===========================

src/SelectContext.ts

@@ -37,6 +37,7 @@ export interface SelectContextProps {
   listItemHeight?: number;
   childrenAsData?: boolean;
   maxCount?: number;
+  activeOptionFilter?: SelectProps['activeOptionFilter'];
 }
 
 const SelectContext = React.createContext<SelectContextProps>(null);

tests/Combobox.test.tsx

@@ -117,6 +117,53 @@ describe('Select.Combobox', () => {
     expect(container.querySelector('input').value).toEqual('1');
   });
 
+  it('activeOptionFilter should work', async () => {
+    const { container } = render(
+      <Select
+        mode="combobox"
+        showSearch
+        activeOptionFilter={(searchValue, option) => {
+          return String(option.value).includes(searchValue);
+        }}
+      >
+        <Option value="apple">apple</Option>
+        <Option value="banana">banana</Option>
+        <Option value="orange">orange</Option>
+      </Select>,
+    );
+
+    const input = container.querySelector('input')!;
+    fireEvent.change(input, { target: { value: 'an' } });
+    await delay();
+
+    expect(
+      container.querySelector('.rc-select-item-option-active .rc-select-item-option-content'),
+    ).toHaveTextContent('banana');
+
+    fireEvent.change(input, { target: { value: 'ora' } });
+    await delay();
+
+    expect(
+      container.querySelector('.rc-select-item-option-active .rc-select-item-option-content'),
+    ).toHaveTextContent('orange');
+  });
+
+  it('activeOptionFilter with empty function should not activate any option', async () => {
+    const { container } = render(
+      <Select mode="combobox" showSearch activeOptionFilter={() => false}>
+        <Option value="apple">apple</Option>
+        <Option value="banana">banana</Option>
+        <Option value="orange">orange</Option>
+      </Select>,
+    );
+
+    const input = container.querySelector('input')!;
+    fireEvent.change(input, { target: { value: 'an' } });
+    await delay();
+
+    expect(container.querySelector('.rc-select-item-option-active')).toBeNull();
+  });
+
   describe('input value', () => {
     const createSelect = (props?: Partial<SelectProps>) => (
       <Select mode="combobox" {...props}>