fix: fix not hiding the previous level option when there is no sub op…

…tion (#401) (#405) * chore: update hover demo * test: add case * test: add possible legacy use cases * fix: fix not hiding the previous level option when there is no sub option * test: add case 增加测试覆盖率 * chore: update logic (cherry picked from commit 65d91fc)
react-component · Mar 23, 2023 · 2913ce9 · 2913ce9
1 parent b0ae457
commit 2913ce9
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 3 deletions.
diff --git a/examples/hover.jsx b/examples/hover.jsx
@@ -54,6 +54,30 @@ const addressOptions = [
       },
     ],
   },
+  {
+    label: '台湾',
+    value: 'tw',
+    children: [
+      {
+        label: '台北',
+        value: 'taipei',
+        children: [
+          {
+            label: '中正区',
+            value: 'zhongzheng',
+          },
+        ],
+      },
+      {
+        label: '高雄',
+        value: 'gaoxiong',
+      }
+    ]
+  },
+  {
+    label: '香港',
+    value: 'xg',
+  },
 ];
 
 class Demo extends React.Component {

diff --git a/src/OptionList/Column.tsx b/src/OptionList/Column.tsx
@@ -112,8 +112,12 @@ export default function Column({
         }) => {
           // >>>>> Open
           const triggerOpenPath = () => {
-            if (!disabled && (!hoverOpen || !isMergedLeaf)) {
-              onActive(fullPath);
+            if (!disabled) {
+              const nextValueCells = [...fullPath];
+              if (hoverOpen && isMergedLeaf) {
+                nextValueCells.pop();
+              }
+              onActive(nextValueCells);
             }
           };
 

diff --git a/tests/checkable.spec.tsx b/tests/checkable.spec.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { mount } from './enzyme';
 import Cascader from '../src';
+import { addressOptions } from './demoOptions';
 
 describe('Cascader.Checkable', () => {
   const options = [
@@ -166,4 +167,15 @@ describe('Cascader.Checkable', () => {
     const menus = wrapper.find('.rc-cascader-menu');
     expect(menus.find('.rc-cascader-checkbox').length).toBe(0);
   });
+
+  it('should work with custom checkable', () => {
+    const wrapper = mount(
+      <Cascader
+        checkable={<span className="my-custom-checkbox" >0</span>}
+        open
+        options={addressOptions}
+      />,
+    );
+    expect(wrapper.find('.my-custom-checkbox')).toHaveLength(3);
+  });
 });
diff --git a/tests/demoOptions.js b/tests/demoOptions.js
@@ -138,3 +138,32 @@ export const addressOptionsForFieldNames = [
     ],
   },
 ];
+
+// Uneven
+export const addressOptionsForUneven = [
+  ...addressOptions,
+  {
+    label: '台湾',
+    value: 'tw',
+    children: [
+      {
+        label: '台北',
+        value: 'taipei',
+        children: [
+          {
+            label: '中正区',
+            value: 'zhongzheng',
+          },
+        ],
+      },
+      {
+        label: '高雄',
+        value: 'gaoxiong',
+      }
+    ]
+  },
+  {
+    label: '香港',
+    value: 'xg',
+  },
+]
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -4,7 +4,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import Cascader from '../src';
-import { addressOptions, optionsForActiveMenuItems } from './demoOptions';
+import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions';
 import { mount } from './enzyme';
 
 describe('Cascader.Basic', () => {
@@ -648,6 +648,44 @@ describe('Cascader.Basic', () => {
     expect(menus.render()).toMatchSnapshot();
   });
 
+  // https://github.com/ant-design/ant-design/issues/41134
+  it('hover to no secondary menu should hide the previous secondary menu', () => {
+    const wrapper = mount(
+      <Cascader
+        changeOnSelect
+        expandTrigger="hover"
+        options={addressOptionsForUneven}
+        onChange={onChange}>
+        <input readOnly />
+      </Cascader>,
+    );
+
+    wrapper.find('input').simulate('click');
+    const menus = wrapper.find('.rc-cascader-menu');
+    expect(menus.length).toBe(1);
+    const menu1Items = menus.at(0).find('.rc-cascader-menu-item');
+    expect(menu1Items.length).toBe(5);
+    wrapper.clickOption(0, 3, 'mouseEnter');
+
+    const menus2 = wrapper.find('.rc-cascader-menu');
+    expect(menus2.length).toBe(2);
+    const menu2Items = menus2.at(1).find('.rc-cascader-menu-item');
+    expect(menu2Items.length).toBe(2);
+    wrapper.clickOption(1, 0, 'mouseEnter');
+
+    expect(wrapper.find('.rc-cascader-menu')).toHaveLength(3);
+    wrapper.clickOption(1, 1, 'mouseEnter');
+    expect(wrapper.find('.rc-cascader-menu')).toHaveLength(2); // should hide the previous secondary menu
+
+    wrapper.clickOption(0, 4, 'mouseEnter');
+    expect(wrapper.find('.rc-cascader-menu')).toHaveLength(1); // should hide the previous secondary menu
+
+    jest.runAllTimers();
+    wrapper.update();
+    expect(selectedValue).toBeFalsy();
+    expect(wrapper.isOpen()).toBeTruthy();
+  })
+
   describe('focus test', () => {
     let domSpy;
     let focusTimes = 0;
@@ -746,6 +784,28 @@ describe('Cascader.Basic', () => {
       expect(wrapper.find('li.rc-cascader-menu-item-active')).toHaveLength(1);
       expect(wrapper.find('li.rc-cascader-menu-item-active').first().text()).toEqual('Bamboo');
     });
+
+    describe('the defaultValue should be activated the first time it is opened', () => {
+      (['click', 'hover'] as const).forEach(expandTrigger => {
+        it(`expandTrigger: ${expandTrigger}`, () => {
+          const wrapper = mount(
+            <Cascader
+              expandTrigger={expandTrigger}
+              defaultValue={['tw', 'gaoxiong']}
+              options={addressOptionsForUneven}
+            >
+              <input readOnly />
+            </Cascader>,
+          );
+
+          wrapper.find('input').simulate('click');
+          const activeItems = wrapper.find('li.rc-cascader-menu-item-active');
+          expect(activeItems).toHaveLength(2);
+          expect(activeItems.last().text()).toEqual('高雄');
+        });
+      })
+    });
+
   });
 
   it('defaultValue not exist', () => {