fix: keyPath is inverse (#402)

* fix:keyPath is inverse

* test: Update snapshot

Author: zombieJ

src/Menu.tsx

@@ -535,12 +535,12 @@ const Menu: React.FC<MenuProps> = props => {
           {container}
         </PathUserContext.Provider>
 
-        {/* Measure menu keys */}
-        {/* <div style={{ display: 'none' }} aria-hidden> */}
-        <PathRegisterContext.Provider value={registerPathContext}>
-          {childList}
-        </PathRegisterContext.Provider>
-        {/* </div> */}
+        {/* Measure menu keys. Add `display: none` to avoid some developer miss use the Menu */}
+        <div style={{ display: 'none' }} aria-hidden>
+          <PathRegisterContext.Provider value={registerPathContext}>
+            {childList}
+          </PathRegisterContext.Provider>
+        </div>
       </MenuContextProvider>
     </IdContext.Provider>
   );

src/MenuItem.tsx

@@ -135,7 +135,8 @@ const InternalMenuItem = (props: MenuItemProps) => {
   ): MenuInfo => {
     return {
       key: eventKey,
-      keyPath: connectedKeys,
+      // Note: For legacy code is reversed which not like other antd component
+      keyPath: [...connectedKeys].reverse(),
       item: legacyMenuItemRef.current,
       domEvent: e,
     };

tests/Menu.spec.js

@@ -331,18 +331,29 @@ describe('Menu', () => {
   });
 
   it('fires click event', () => {
+    jest.useFakeTimers();
+
     resetWarned();
 
     const errorSpy = jest.spyOn(console, 'error');
 
     const handleClick = jest.fn();
     const wrapper = mount(
-      <Menu onClick={handleClick}>
+      <Menu onClick={handleClick} openKeys={['parent']}>
         <MenuItem key="1">1</MenuItem>
         <MenuItem key="2">2</MenuItem>
+        <Menu.SubMenu key="parent">
+          <MenuItem key="3">3</MenuItem>
+        </Menu.SubMenu>
       </Menu>,
     );
-    wrapper.find('MenuItem').first().simulate('click');
+
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    wrapper.find('.rc-menu-item').first().simulate('click');
     const info = handleClick.mock.calls[0][0];
     expect(info.key).toBe('1');
     expect(info.item).toBeTruthy();
@@ -351,7 +362,13 @@ describe('Menu', () => {
       'Warning: `info.item` is deprecated since we will move to function component that not provides React Node instance in future.',
     );
 
+    handleClick.mockReset();
+    wrapper.find('.rc-menu-item').last().simulate('click');
+    expect(handleClick.mock.calls[0][0].keyPath).toEqual(['3', 'parent']);
+
     errorSpy.mockRestore();
+
+    jest.useRealTimers();
   });
 
   it('fires deselect event', () => {

tests/__snapshots__/Keyboard.spec.tsx.snap

@@ -1,43 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Menu.Keyboard no data-menu-id by init 1`] = `
-<ul
-  class="rc-menu rc-menu-root rc-menu-inline"
-  data-menu-list="true"
-  role="menu"
-  tabindex="0"
->
-  <li
-    class="rc-menu-submenu rc-menu-submenu-inline rc-menu-submenu-open"
-    role="none"
+Array [
+  <ul
+    class="rc-menu rc-menu-root rc-menu-inline"
+    data-menu-list="true"
+    role="menu"
+    tabindex="0"
   >
-    <div
-      aria-expanded="true"
-      aria-haspopup="true"
-      class="rc-menu-submenu-title"
-      role="menuitem"
-      style="padding-left:24px"
-      tabindex="-1"
-      title="Light"
+    <li
+      class="rc-menu-submenu rc-menu-submenu-inline rc-menu-submenu-open"
+      role="none"
     >
-      Light
-      <i
-        class="rc-menu-submenu-arrow"
-      />
-    </div>
-    <ul
-      class="rc-menu rc-menu-sub rc-menu-inline"
-      data-menu-list="true"
-    >
-      <li
-        class="rc-menu-item"
+      <div
+        aria-expanded="true"
+        aria-haspopup="true"
+        class="rc-menu-submenu-title"
         role="menuitem"
-        style="padding-left:48px"
+        style="padding-left:24px"
         tabindex="-1"
+        title="Light"
+      >
+        Light
+        <i
+          class="rc-menu-submenu-arrow"
+        />
+      </div>
+      <ul
+        class="rc-menu rc-menu-sub rc-menu-inline"
+        data-menu-list="true"
       >
-        Bamboo
-      </li>
-    </ul>
-  </li>
-</ul>
+        <li
+          class="rc-menu-item"
+          role="menuitem"
+          style="padding-left:48px"
+          tabindex="-1"
+        >
+          Bamboo
+        </li>
+      </ul>
+    </li>
+  </ul>,
+  <div
+    aria-hidden="true"
+    style="display:none"
+  />,
+]
 `;