From 8d080f91d726c1848067ca0ccd0e298f150d0baa Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 7 Nov 2018 11:36:05 +0800
Subject: [PATCH] Fix inlineCollpased Menu remains inline mode instead of
 vertical

close ant-design/ant-design-pro#2783
close ant-design/ant-design-pro#2782
close ant-design/ant-design-pro#2786
---
 components/menu/index.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index 7dd2992b1cb1..d14d06db8344 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -131,14 +131,21 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
       this.inlineOpenKeys = [];
     }
   }
+  restoreModeVerticalFromInline() {
+    if (this.switchingModeFromInline) {
+      this.switchingModeFromInline = false;
+      this.setState({});
+    }
+  }
   handleTransitionEnd = (e: TransitionEvent) => {
     // when inlineCollapsed menu width animation finished
     // https://github.com/ant-design/ant-design/issues/12864
-    if (e.propertyName === 'width' &&
-        e.target === e.currentTarget &&
-        this.switchingModeFromInline) {
-      this.switchingModeFromInline = false;
-      this.setState({});
+    const widthCollapsed = e.propertyName === 'width' && e.target === e.currentTarget;
+    // Fix for <Menu style={{ width: '100%' }} />, the width transition won't trigger when menu is collapsed
+    // https://github.com/ant-design/ant-design-pro/issues/2783
+    const iconScaled = e.propertyName === 'font-size' && (e.target as HTMLElement).className.indexOf('anticon') >= 0;
+    if (widthCollapsed || iconScaled) {
+      this.restoreModeVerticalFromInline();
     }
   }
   handleClick = (e: ClickParam) => {