fix: Cascader expandTrigger="hover" behavior when search (#406)

Author: afc163

examples/change-on-select.tsx

@@ -3,57 +3,63 @@ import React from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
 
-const addressOptions = [
+const options = [
   {
-    label: '福建',
-    value: 'fj',
+    label: "Women Clothing",
+    value: "Women Clothing",
     children: [
       {
-        label: '福州',
-        value: 'fuzhou',
+        label: "Women Tops, Blouses & Tee",
+        value: "Women Tops, Blouses & Tee",
         children: [
           {
-            label: '马尾',
-            value: 'mawei',
+            label: "Women T-Shirts",
+            value: "Women T-Shirts"
           },
-        ],
-      },
-      {
-        label: '泉州',
-        value: 'quanzhou',
+          {
+            label: "Women Tops",
+            value: "Women Tops"
+          },
+          {
+            label: "Women Tank Tops & Camis",
+            value: "Women Tank Tops & Camis"
+          },
+          {
+            label: "Women Blouses",
+            value: "Women Blouses"
+          }
+        ]
       },
-    ],
-  },
-  {
-    label: '浙江',
-    value: 'zj',
-    children: [
       {
-        label: '杭州',
-        value: 'hangzhou',
+        label: "Women Suits",
+        value: "Women Suits",
         children: [
           {
-            label: '余杭',
-            value: 'yuhang',
+            label: "Women Suit Pants",
+            value: "Women Suit Pants"
           },
-        ],
-      },
-    ],
-  },
-  {
-    label: '北京',
-    value: 'bj',
-    children: [
-      {
-        label: '朝阳区',
-        value: 'chaoyang',
+          {
+            label: "Women Suit Sets",
+            value: "Women Suit Sets"
+          },
+          {
+            label: "Women Blazers",
+            value: "Women Blazers"
+          }
+        ]
       },
       {
-        label: '海淀区',
-        value: 'haidian',
-      },
-    ],
-  },
+        label: "Women Co-ords",
+        value: "Women Co-ords",
+        children: [
+          {
+            label: "Two-piece Outfits",
+            value: "Two-piece Outfits"
+          }
+        ]
+      }
+    ]
+  }
 ];
 
 class Demo extends React.Component {
@@ -71,14 +77,13 @@ class Demo extends React.Component {
   render() {
     return (
       <Cascader
-        options={addressOptions}
+        showSearch
+        options={options}
         onChange={this.onChange}
         changeOnSelect
         expandTrigger="hover"
         loadData={() => console.log('loadData')}
-      >
-        <input placeholder="please select address" value={this.state.inputValue} readOnly />
-      </Cascader>
+      />
     );
   }
 }

src/OptionList/Column.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { isLeaf, toPathKey } from '../utils/commonUtil';
-import CascaderContext from '../context';
-import Checkbox from './Checkbox';
+import * as React from 'react';
 import type { DefaultOptionType, SingleValueType } from '../Cascader';
+import CascaderContext from '../context';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
+import { isLeaf, toPathKey } from '../utils/commonUtil';
+import Checkbox from './Checkbox';
 
 export const FIX_LABEL = '__cascader_fix_label__';
 
@@ -23,6 +23,7 @@ export interface ColumnProps {
   halfCheckedSet: Set<React.Key>;
   loadingKeys: React.Key[];
   isSelectable: (option: DefaultOptionType) => boolean;
+  searchValue?: string;
 }
 
 export default function Column({
@@ -38,6 +39,7 @@ export default function Column({
   halfCheckedSet,
   loadingKeys,
   isSelectable,
+  searchValue,
 }: ColumnProps) {
   const menuPrefixCls = `${prefixCls}-menu`;
   const menuItemPrefixCls = `${prefixCls}-menu-item`;
@@ -112,13 +114,14 @@ export default function Column({
         }) => {
           // >>>>> Open
           const triggerOpenPath = () => {
-            if (!disabled) {
-              const nextValueCells = [...fullPath];
-              if (hoverOpen && isMergedLeaf) {
-                nextValueCells.pop();
-              }
-              onActive(nextValueCells);
+            if (disabled || searchValue) {
+              return;
+            }
+            const nextValueCells = [...fullPath];
+            if (hoverOpen && isMergedLeaf) {
+              nextValueCells.pop();
             }
+            onActive(nextValueCells);
           };
 
           // >>>>> Selection

src/OptionList/index.tsx

@@ -204,6 +204,7 @@ const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
       <Column
         key={index}
         {...columnProps}
+        searchValue={searchValue}
         prefixCls={mergedPrefixCls}
         options={col.options}
         prevValuePath={prevValuePath}