mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Fix submenu popup issue when specified unexisted defaultOpenKeys

Browse Source 
close #8475
This commit is contained in:
afc163 2017-12-17 18:54:31 +08:00
parent 0ecb6ad45f
commit 7d082c1dc5
2 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/menu/__tests__/index.test.js
View File

@ -177,6 +177,36 @@ describe('Menu', () => {
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
});
it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
const wrapper = mount(
<Menu defaultOpenKeys={['not-existed']} mode="inline">
<Menu.Item key="menu1">
<Icon type="inbox" />
<span>Option</span>
</Menu.Item>
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">
Option
</Menu.Item>
<Menu.Item key="submenu2">
Option
</Menu.Item>
</SubMenu>
</Menu>
);
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
wrapper.setProps({ inlineCollapsed: true });
jest.runAllTimers();
wrapper.update();
wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(true);
expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
});
describe('open submenu when click submenu title', () => {
beforeEach(() => {
jest.useFakeTimers();

6
components/menu/index.tsx
View File

@ -71,6 +71,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
switchModeFromInline: boolean;
leaveAnimationExecutedWhenInlineCollapsed: boolean;
inlineOpenKeys: string[] = [];
constructor(props: MenuProps) {
super(props);
@ -147,7 +148,8 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
}
getRealMenuMode() {
const inlineCollapsed = this.getInlineCollapsed();
if (this.switchModeFromInline && inlineCollapsed) {
if (this.switchModeFromInline && inlineCollapsed && this.leaveAnimationExecutedWhenInlineCollapsed) {
this.leaveAnimationExecutedWhenInlineCollapsed = false;
return 'inline';
}
const { mode } = this.props;
@ -186,6 +188,8 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
leave: (node: HTMLElement, done: () => void) => animation.leave(node, () => {
// Make sure inline menu leave animation finished before mode is switched
this.switchModeFromInline = false;
// Fix https://github.com/ant-design/ant-design/issues/8475
this.leaveAnimationExecutedWhenInlineCollapsed = true;
this.setState({});
// when inlineCollapsed change false to true, all submenu will be unmounted,
// so that we don't need handle animation leaving.