diff --git a/src/OptionList.tsx b/src/OptionList.tsx index 056c714c..4763bcb5 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -15,6 +15,7 @@ import useBaseProps from './hooks/useBaseProps'; import type { FlattenOptionData } from './interface'; import { isPlatformMac } from './utils/platformUtil'; import { isValidCount } from './utils/valueUtil'; +import { toArray } from './utils/commonUtil'; // export interface OptionListProps { export type OptionListProps = Record; @@ -29,6 +30,10 @@ function isTitleType(content: any) { return typeof content === 'string' || typeof content === 'number'; } +function includes(test: React.ReactNode, search: string) { + return toArray(test).join('').toUpperCase().includes(search.toUpperCase()); +} + /** * Using virtual list of option display. * Will fallback to dom if use customize render. @@ -60,6 +65,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r listHeight, listItemHeight, optionRender, + optionFilterProp, classNames: contextClassNames, styles: contextStyles, } = React.useContext(SelectContext); @@ -159,9 +165,13 @@ const OptionList: React.ForwardRefRenderFunction = (_, 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 (searchValue) { + const matchValue = optionFilterProp ? data[optionFilterProp] : data.value; + return includes(matchValue, searchValue); + } + return data.value === value; + }); if (index !== -1) { setActive(index); @@ -177,7 +187,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r } return () => clearTimeout(timeoutId); - }, [open, searchValue]); + }, [open, searchValue, optionFilterProp]); // ========================== Values ========================== const onSelectValue = (value: RawValueType) => { diff --git a/src/Select.tsx b/src/Select.tsx index 130f3987..edb870b6 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -677,6 +677,7 @@ const Select = React.forwardRef(null);