Active previous item when children changes

Author: yesmeck

src/MenuMixin.js

@@ -89,10 +89,9 @@ const MenuMixin = {
   },
 
   componentWillReceiveProps(nextProps) {
-    let activeKey;
-    const originalActiveKey = this.getStore().getState().activeKey[this.getEventKey()];
-    activeKey = getActiveKey(nextProps, originalActiveKey);
-    // fix: this.setState(), parent.render(),
+    const originalActiveKey = 'activeKey' in nextProps ? nextProps.activeKey :
+      this.getStore().getState().activeKey[this.getEventKey()];
+    const activeKey = getActiveKey(nextProps, originalActiveKey);
     if (activeKey !== originalActiveKey) {
       updateActiveKey(this.getStore(), this.getEventKey(), activeKey);
     }

tests/Menu.spec.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-undef */
+/* eslint-disable no-undef, react/no-multi-comp */
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
@@ -215,4 +215,30 @@ describe('Menu', () => {
     wrapper.find('Menu').simulate('keyDown', { keyCode: KeyCode.DOWN });
     expect(wrapper.find('MenuItem').at(1).props().active).toBe(true);
   });
+
+  it('active first item when children changes', () => {
+    class App extends React.Component {
+      state = {
+        items: ['foo'],
+      }
+
+      render() {
+        return (
+          <Menu defaultActiveFirst activeKey="" selectedKeys={['foo']}>
+            {this.state.items.map(item =>
+              <MenuItem key={item}>{item}</MenuItem>
+            )}
+          </Menu>
+        );
+      }
+    }
+
+    const wrapper = mount(<App />);
+
+    wrapper.setState({ items: ['bar', 'foo'] });
+
+    expect(
+      wrapper.find('li').first().hasClass('rc-menu-item-active')
+    ).toBe(true);
+  });
 });