diff --git a/docs/demo/multiple-search.md b/docs/demo/multiple-search.md new file mode 100644 index 00000000..f02257b8 --- /dev/null +++ b/docs/demo/multiple-search.md @@ -0,0 +1,8 @@ +--- +title: multiple-search +nav: + title: Demo + path: /demo +--- + + diff --git a/examples/multiple-search.tsx b/examples/multiple-search.tsx new file mode 100644 index 00000000..410dbe7a --- /dev/null +++ b/examples/multiple-search.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import '../assets/index.less'; +import Cascader from '../src'; + +const options = [ + { + value: 'zhejiang', + label: 'Zhejiang', + children: [ + { + value: 'hangzhou', + label: 'Hangzhou', + children: [ + { + value: 'xihu', + label: 'West Lake', + }, + { + value: 'xiasha', + label: 'Xia Sha', + }, + ], + }, + ], + }, + { + value: 'jiangsu', + label: 'Jiangsu', + children: [ + { + value: 'nanjing', + label: 'Nanjing', + children: [ + { + value: 'zhonghuamen', + label: 'Zhong Hua men', + }, + ], + }, + ], + }, +]; + +const Demo = () => { + return ; +}; + +export default Demo; diff --git a/src/Cascader.tsx b/src/Cascader.tsx index 97adcd20..c746af10 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -280,7 +280,7 @@ const Cascader = React.forwardRef((props, re mergedFieldNames, dropdownPrefixCls || prefixCls, searchConfig, - changeOnSelect, + changeOnSelect || multiple, ); // =========================== Values =========================== diff --git a/src/hooks/useSearchOptions.ts b/src/hooks/useSearchOptions.ts index 624af9d3..3d99f603 100644 --- a/src/hooks/useSearchOptions.ts +++ b/src/hooks/useSearchOptions.ts @@ -9,13 +9,13 @@ const defaultFilter: ShowSearchType['filter'] = (search, options, { label = '' } const defaultRender: ShowSearchType['render'] = (inputValue, path, prefixCls, fieldNames) => path.map(opt => opt[fieldNames.label as string]).join(' / '); -export default ( +const useSearchOptions = ( search: string, options: DefaultOptionType[], fieldNames: InternalFieldNames, prefixCls: string, config: ShowSearchType, - changeOnSelect?: boolean, + enableHalfPath?: boolean, ) => { const { filter = defaultFilter, render = defaultRender, limit = 50, sort } = config; @@ -46,8 +46,8 @@ export default ( // If is leaf option !children || children.length === 0 || - // If is changeOnSelect - changeOnSelect + // If is changeOnSelect or multiple + enableHalfPath ) { if (filter(search, connectedPathOptions, { label: fieldNames.label })) { filteredOptions.push({ @@ -87,5 +87,7 @@ export default ( return limit !== false && limit > 0 ? filteredOptions.slice(0, limit as number) : filteredOptions; - }, [search, options, fieldNames, prefixCls, render, changeOnSelect, filter, sort, limit]); + }, [search, options, fieldNames, prefixCls, render, enableHalfPath, filter, sort, limit]); }; + +export default useSearchOptions; diff --git a/tests/search.spec.tsx b/tests/search.spec.tsx index 2083f4cd..8b13be94 100644 --- a/tests/search.spec.tsx +++ b/tests/search.spec.tsx @@ -202,6 +202,14 @@ describe('Cascader.Search', () => { wrapper.find('.rc-cascader-menu-item').first().simulate('click'); wrapper.find('.rc-cascader-menu-item').first().simulate('mousedown'); expect(onChange).toHaveBeenCalledWith([['bamboo', 'little', 'fish']], expect.anything()); + + doSearch(wrapper, 'light'); + wrapper.find('.rc-cascader-menu-item').first().simulate('click'); + wrapper.find('.rc-cascader-menu-item').first().simulate('mousedown'); + expect(onChange).toHaveBeenCalledWith( + [['bamboo', 'little', 'fish'], ['light']], + expect.anything(), + ); }); it('should not crash when exist options with same value on different levels', () => {