Menu#4640

components/menu/__tests__/index-spec.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React,{useEffect, useState} from 'react';
 import ReactDOM from 'react-dom';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -978,6 +978,51 @@ describe('Menu', () => {
         document.body.removeChild(div);
     });
 
+    it('should show renderMore when hozInLine & async load more items ', done => {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+
+        const items = [];
+        for (let i = 0; i < 50; i++) {
+          items.push(i);
+        }
+        function App() {
+          const [categoryList, setCategoryList] = useState([]);
+          useEffect(() => {
+            setCategoryList(items);
+          }, []);
+
+          return (
+            <Menu
+              hozInLine
+              direction="hoz"
+              triggerType="hover"
+              mode="popup"
+              popupAutoWidth
+            >
+              {categoryList.map((index, v) => (
+                <SubMenu label="Sub Nav" key={index}>
+                  <Item key="sub-12">Sub option 1</Item>
+                  <Item key="sub-22">Sub option 2</Item>
+                </SubMenu>
+              ))}
+            </Menu>
+          );
+        }
+        ReactDOM.render(
+            <App/>,
+            div
+        );
+        const menu = document.querySelector('.next-menu');
+        assert(menu.querySelectorAll('li.next-menu-item').length === 52);
+        assert(menu.querySelectorAll('li.next-menu-item.next-menu-more').length === 2);
+        assert(menu.querySelectorAll('li.menuitem-overflowed').length > 1);
+        ReactDOM.unmountComponentAtNode(div);
+        document.body.removeChild(div);
+        done();
+    });
+
+
     it('should support hozInLine with header&footer in hoz', () => {
         const div = document.createElement('div');
         document.body.appendChild(div);

components/menu/view/menu.jsx

@@ -479,7 +479,6 @@ class Menu extends Component {
 
     componentDidMount() {
         this.menuNode = findDOMNode(this);
-
         this.adjustChildrenWidth();
 
         if (this.props.hozInLine) {
@@ -488,7 +487,9 @@ class Menu extends Component {
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (prevState.lastVisibleIndex !== this.state.lastVisibleIndex) {
+        if ( prevState.lastVisibleIndex !== this.state.lastVisibleIndex 
+             || ( React.Children.toArray(this.props.children).length !==  React.Children.toArray(prevProps.children).length) 
+        ) {
             this.adjustChildrenWidth();
         }
     }