From 67dc9b914c1f108f8c0540e6db56ce8588be6b1e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 14 Nov 2018 15:24:08 +0800
Subject: [PATCH] :bug: Fixed bug of collapsed menu wrong mode responsively

close #13104
---
 components/menu/index.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index b4ffca7a25..73dc3b8d31 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -52,6 +52,7 @@ export interface MenuProps {
   subMenuOpenDelay?: number;
   getPopupContainer?: (triggerNode: Element) => HTMLElement;
   focusable?: boolean;
+  onMouseEnter?: (e: MouseEvent) => void;
 }
 
 export interface MenuState {
@@ -138,6 +139,16 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
       this.setState({});
     }
   }
+  // Restore vertical mode when menu is collapsed responsively when mounted
+  // https://github.com/ant-design/ant-design/issues/13104
+  // TODO: not a perfect solution, looking a new way to avoid setting switchingModeFromInline in this situation
+  handleMouseEnter = (e: MouseEvent) => {
+    this.restoreModeVerticalFromInline();
+    const { onMouseEnter } = this.props;
+    if (onMouseEnter) {
+      onMouseEnter(e);
+    }
+  }
   handleTransitionEnd = (e: TransitionEvent) => {
     // when inlineCollapsed menu width animation finished
     // https://github.com/ant-design/ant-design/issues/12864
@@ -252,6 +263,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
         {...this.props}
         {...menuProps}
         onTransitionEnd={this.handleTransitionEnd}
+        onMouseEnter={this.handleMouseEnter}
       />
     );
   }