From 65d91fcbb5115764c6acb7a5ef9f9f9c71e8ee8f Mon Sep 17 00:00:00 2001 From: Wuxh Date: Thu, 9 Mar 2023 23:10:44 +0800 Subject: [PATCH] fix: fix not hiding the previous level option when there is no sub option (#401) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- examples/hover.tsx | 24 +++++++++++++++ src/OptionList/Column.tsx | 8 +++-- tests/checkable.spec.tsx | 12 ++++++++ tests/demoOptions.ts | 29 ++++++++++++++++++ tests/index.spec.tsx | 62 ++++++++++++++++++++++++++++++++++++++- 5 files changed, 132 insertions(+), 3 deletions(-) diff --git a/examples/hover.tsx b/examples/hover.tsx index ca6e6c01..0b667ae9 100644 --- a/examples/hover.tsx +++ b/examples/hover.tsx @@ -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 index 39c46604..3866f55a 100644 --- 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 index 7ac2eec2..9b77c9bc 100644 --- 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( + 0} + open + options={addressOptions} + />, + ); + expect(wrapper.find('.my-custom-checkbox')).toHaveLength(3); + }); }); diff --git a/tests/demoOptions.ts b/tests/demoOptions.ts index 9408dfd8..283952aa 100644 --- a/tests/demoOptions.ts +++ b/tests/demoOptions.ts @@ -150,3 +150,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', + }, +] \ No newline at end of file diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index b0120283..543f71d5 100644 --- 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( + + + , + ); + + 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( + + + , + ); + + 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', () => {