fix: hover trigger should not open final path

Author: zombieJ

jest.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   setupFiles: ['./tests/setup.js'],
   snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
-}
+};

package.json

@@ -36,7 +36,7 @@
     "compile": "father build",
     "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
     "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.jsx",
-    "test": "father test --no-cache",
+    "test": "father test",
     "coverage": "father test --coverage",
     "now-build": "npm run build"
   },
@@ -55,7 +55,7 @@
     "father": "^2.13.2",
     "gh-pages": "^3.1.0",
     "glob": "^7.1.6",
-    "jest": "^26.0.0",
+    "jest": "^26.6.3",
     "np": "^6.0.0",
     "rc-form": "^2.4.0",
     "react": "^16.0.0",

src/OptionList/Column.tsx

@@ -39,6 +39,8 @@ export default function Column({
   const { changeOnSelect, expandTrigger, expandIcon, loadingIcon, dropdownMenuColumnStyle } =
     React.useContext(CascaderContext);
 
+  const hoverOpen = expandTrigger === 'hover';
+
   // ============================ Render ============================
   return (
     <ul className={menuPrefixCls} role="menu">
@@ -53,7 +55,7 @@ export default function Column({
 
         // >>>>> Open
         const triggerOpenPath = () => {
-          if (!disabled) {
+          if (!disabled && (!hoverOpen || !isMergedLeaf)) {
             onOpen(index, value);
           }
         };
@@ -98,7 +100,7 @@ export default function Column({
               }
             }}
             onMouseEnter={() => {
-              if (expandTrigger) {
+              if (hoverOpen) {
                 triggerOpenPath();
               }
             }}

tests/__snapshots__/index.spec.js.snap tests/__snapshots__/index.spec.tsx.snap

@@ -7,7 +7,11 @@ type ReplaceReturnType<T extends (...a: any) => any, TNewReturn> = (
 
 export interface ReactWrapper extends OriginReactWrapper {
   isOpen: () => boolean;
-  clickOption: (menuIndex: number, itemIndex: number, type?: 'click' | 'doubleClick') => ReactWrapper;
+  clickOption: (
+    menuIndex: number,
+    itemIndex: number,
+    type?: 'click' | 'doubleClick' | 'mouseEnter',
+  ) => ReactWrapper;
 }
 
 type Mount = ReplaceReturnType<typeof originMount, ReactWrapper>;

tests/enzyme.ts

@@ -3,8 +3,8 @@
 import React from 'react';
 import { resetWarned } from 'rc-util/lib/warning';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { mount } from 'enzyme';
-import Cascader from '..';
+import { mount } from './enzyme';
+import Cascader from '../src';
 import { addressOptions, optionsForActiveMenuItems } from './demoOptions';
 
 describe('Cascader.Basic', () => {
@@ -368,6 +368,8 @@ describe('Cascader.Basic', () => {
         value: [],
       };
 
+      timeout = null;
+
       componentDidMount() {
         this.timeout = setTimeout(() => {
           this.setState({
@@ -650,47 +652,77 @@ describe('Cascader.Basic', () => {
     });
 
     it('focus', () => {
-      const cascaderRef = React.createRef();
+      const cascaderRef = React.createRef() as any;
       mount(<Cascader ref={cascaderRef} />);
 
       cascaderRef.current.focus();
       expect(focusTimes === 1).toBeTruthy();
     });
 
     it('blur', () => {
-      const cascaderRef = React.createRef();
+      const cascaderRef = React.createRef() as any;
       mount(<Cascader ref={cascaderRef} />);
 
       cascaderRef.current.blur();
       expect(blurTimes === 1).toBeTruthy();
     });
   });
 
-  it('active className', () => {
-    const wrapper = mount(
-      <Cascader
-        open
-        expandIcon=""
-        options={[
-          {
-            label: 'Bamboo',
-            value: 'bamboo',
-            children: [
-              {
-                label: 'Little',
-                value: 'little',
-              },
-            ],
-          },
-        ]}
-      />,
-    );
+  describe('active className', () => {
+    it('expandTrigger: click', () => {
+      const wrapper = mount(
+        <Cascader
+          open
+          expandIcon=""
+          options={[
+            {
+              label: 'Bamboo',
+              value: 'bamboo',
+              children: [
+                {
+                  label: 'Little',
+                  value: 'little',
+                },
+              ],
+            },
+          ]}
+        />,
+      );
 
-    wrapper.clickOption(0, 0);
-    wrapper.clickOption(1, 0);
+      wrapper.clickOption(0, 0);
+      wrapper.clickOption(1, 0);
+
+      expect(wrapper.find('li.rc-cascader-menu-item-active')).toHaveLength(2);
+      expect(wrapper.find('li.rc-cascader-menu-item-active').first().text()).toEqual('Bamboo');
+      expect(wrapper.find('li.rc-cascader-menu-item-active').last().text()).toEqual('Little');
+    });
+
+    it('expandTrigger: hover', () => {
+      const wrapper = mount(
+        <Cascader
+          open
+          expandIcon=""
+          expandTrigger="hover"
+          options={[
+            {
+              label: 'Bamboo',
+              value: 'bamboo',
+              children: [
+                {
+                  label: 'Little',
+                  value: 'little',
+                },
+              ],
+            },
+          ]}
+        />,
+      );
 
-    expect(wrapper.find('li.rc-cascader-menu-item-active')).toHaveLength(2);
-    expect(wrapper.find('li.rc-cascader-menu-item-active').first().text()).toEqual('Bamboo');
-    expect(wrapper.find('li.rc-cascader-menu-item-active').last().text()).toEqual('Little');
+      wrapper.clickOption(0, 0, 'mouseEnter');
+      wrapper.clickOption(1, 0, 'mouseEnter');
+
+      expect(wrapper.find('li.rc-cascader-menu-item-active')).toHaveLength(1);
+      expect(wrapper.find('li.rc-cascader-menu-item-active').first().text()).toEqual('Bamboo');
+    });
   });
 });

tests/index.spec.js tests/index.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
-import Cascader from '..';
+import Cascader from '../src';
 import { addressOptions } from './demoOptions';
 
 describe('Cascader.Keyboard', () => {

tests/keyboard.spec.js

@@ -13,11 +13,14 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
   isOpen() {
     return !!this.find('Trigger').props().popupVisible;
   },
-  clickOption(menuIndex, itemIndex, type = 'click') {
+  findOption(menuIndex, itemIndex) {
     const menu = this.find('ul.rc-cascader-menu').at(menuIndex);
     const itemList = menu.find('li.rc-cascader-menu-item');
 
-    itemList.at(itemIndex).simulate(type);
+    return itemList.at(itemIndex);
+  },
+  clickOption(menuIndex, itemIndex, type = 'click') {
+    this.findOption(menuIndex, itemIndex).simulate(type);
 
     return this;
   },