feat: optimize search (#530)

* feat: optimize search

* feat: test

* feat: test

* feat: test

* feat: test

* feat: add test

Author: crazyair

docs/demo/multiple-search.md

@@ -0,0 +1,8 @@
+---
+title: multiple-search
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../../examples/multiple-search.tsx"></code>

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 <Cascader checkable showSearch options={options} />;
+};
+
+export default Demo;

src/Cascader.tsx

@@ -280,7 +280,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     mergedFieldNames,
     dropdownPrefixCls || prefixCls,
     searchConfig,
-    changeOnSelect,
+    changeOnSelect || multiple,
   );
 
   // =========================== Values ===========================

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;

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', () => {