update activeKey when changed (#228)

src/SubPopupMenu.js

@@ -141,13 +141,20 @@ export class SubPopupMenu extends React.Component {
     return this.props.visible || nextProps.visible;
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     const props = this.props;
     const originalActiveKey = 'activeKey' in props ? props.activeKey :
       props.store.getState().activeKey[getEventKey(props)];
     const activeKey = getActiveKey(props, originalActiveKey);
     if (activeKey !== originalActiveKey) {
       updateActiveKey(props.store, getEventKey(props), activeKey);
+    } else if ('activeKey' in prevProps) {
+      // If prev activeKey is not same as current activeKey,
+      // we should set it.
+      const prevActiveKey = getActiveKey(prevProps, prevProps.activeKey);
+      if (activeKey !== prevActiveKey) {
+        updateActiveKey(props.store, getEventKey(props), activeKey);
+      }
     }
   }
 

tests/SubPopupMenu.spec.js

@@ -1,4 +1,7 @@
+import React from 'react';
+import { mount } from 'enzyme';
 import { saveRef } from '../src/SubPopupMenu';
+import Menu, { MenuItem } from '../src';
 
 describe('SubPopupMenu saveRef', () => {
   let subPopupMenu;
@@ -21,4 +24,24 @@ describe('SubPopupMenu saveRef', () => {
 
     expect(subPopupMenu.instanceArray).toEqual([c]);
   });
+
+  it('activeKey change should reset store activeKey', () => {
+    const wrapper = mount(
+      <Menu activeKey="1">
+        <MenuItem key="1">1</MenuItem>
+        <MenuItem key="2">2</MenuItem>
+      </Menu>
+    );
+
+    function getItemActive(index) {
+      return wrapper.find('MenuItem').at(index).instance().props.active;
+    }
+    expect(getItemActive(0)).toBe(true);
+    expect(getItemActive(1)).toBe(false);
+
+    wrapper.setProps({ activeKey: '2' });
+
+    expect(getItemActive(0)).toBe(false);
+    expect(getItemActive(1)).toBe(true);
+  });
 });