fix: Menu defaultOpenKeys not work as expect (#15970)

* Remove animation on first render * update test cas
ant-design · Apr 9, 2019 · bef491e · bef491e
1 parent 6bd7614
commit bef491e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/components/_util/raf.ts b/components/_util/raf.ts
@@ -34,3 +34,5 @@ wrapperRaf.cancel = function(pid?: number) {
   raf.cancel(ids[pid]);
   delete ids[pid];
 };
+
+wrapperRaf.ids = ids; // export this for test usage
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import Menu from '..';
 import Icon from '../../icon';
 import Layout from '../../layout';
+import raf from '../../_util/raf';
 
 jest.mock('mutationobserver-shim', () => {
   global.MutationObserver = function MutationObserver() {
@@ -73,6 +74,10 @@ describe('Menu', () => {
         .at(0)
         .hasClass('ant-menu-hidden'),
     ).not.toBe(true);
+
+    const rafCount = Object.keys(raf.ids).length;
+    wrapper.unmount();
+    expect(Object.keys(raf.ids).length).toBe(rafCount - 1);
   });
 
   it('should accept defaultOpenKeys in mode vertical', () => {

diff --git a/components/menu/index.tsx b/components/menu/index.tsx
@@ -10,6 +10,7 @@ import animation from '../_util/openAnimation';
 import warning from '../_util/warning';
 import { polyfill } from 'react-lifecycles-compat';
 import { SiderContext, SiderContextProps } from '../layout/Sider';
+import raf from '../_util/raf';
 
 export interface SelectParam {
   key: string;
@@ -69,6 +70,7 @@ export interface MenuState {
   switchingModeFromInline: boolean;
   inlineOpenKeys: string[];
   prevProps: InternalMenuProps;
+  mounted: boolean;
 }
 
 export interface MenuContextProps {
@@ -122,6 +124,8 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
     return newState;
   }
 
+  private mountRafId: number;
+
   constructor(props: InternalMenuProps) {
     super(props);
 
@@ -150,9 +154,25 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
       switchingModeFromInline: false,
       inlineOpenKeys: [],
       prevProps: props,
+      mounted: false,
     };
   }
 
+  // [Legacy] Origin code can render full defaultOpenKeys is caused by `rc-animate` bug.
+  // We have to workaround this to prevent animation on first render.
+  // https://github.com/ant-design/ant-design/issues/15966
+  componentDidMount() {
+    this.mountRafId = raf(() => {
+      this.setState({
+        mounted: true,
+      });
+    }, 10);
+  }
+
+  componentWillUnmount() {
+    raf.cancel(this.mountRafId);
+  }
+
   restoreModeVerticalFromInline() {
     const { switchingModeFromInline } = this.state;
     if (switchingModeFromInline) {
@@ -262,6 +282,7 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
   }
 
   renderMenu = ({ getPopupContainer, getPrefixCls }: ConfigConsumerProps) => {
+    const { mounted } = this.state;
     const { prefixCls: customizePrefixCls, className, theme, collapsedWidth } = this.props;
     const passProps = omit(this.props, ['collapsedWidth', 'siderCollapsed']);
     const menuMode = this.getRealMenuMode();
@@ -282,9 +303,9 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
     if (menuMode !== 'inline') {
       // closing vertical popup submenu after click it
       menuProps.onClick = this.handleClick;
-      menuProps.openTransitionName = menuOpenAnimation;
+      menuProps.openTransitionName = mounted && menuOpenAnimation;
     } else {
-      menuProps.openAnimation = menuOpenAnimation;
+      menuProps.openAnimation = mounted && menuOpenAnimation;
     }
 
     // https://github.com/ant-design/ant-design/issues/8587