🐛 Allow none-menu-item in Menu children

close ant-design/ant-design#11517 (comment)

Author: afc163

src/SubPopupMenu.js

@@ -35,7 +35,12 @@ export function getActiveKey(props, originalActiveKey) {
   if (activeKey) {
     let found;
     loopMenuItem(children, (c, i) => {
-      if (c && !c.props.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) {
+      if (
+        c &&
+        c.props &&
+        !c.props.disabled &&
+        activeKey === getKeyFromChildrenIndex(c, eventKey, i)
+      ) {
         found = true;
       }
     });
@@ -266,6 +271,10 @@ export class SubPopupMenu extends React.Component {
     const props = this.props;
     const key = getKeyFromChildrenIndex(child, props.eventKey, i);
     const childProps = child.props;
+    // https://github.com/ant-design/ant-design/issues/11517#issuecomment-477403055
+    if (!childProps || typeof child.type === 'string') {
+      return child;
+    }
     const isActive = key === state.activeKey;
     const newChildProps = {
       mode: childProps.mode || props.mode,
@@ -348,8 +357,6 @@ export class SubPopupMenu extends React.Component {
     delete props.onClick;
 
     return (
-      // ESLint is not smart enough to know that the type of `children` was checked.
-      /* eslint-disable */
       <DOMWrap
         {...props}
         prefixCls={prefixCls}
@@ -367,7 +374,6 @@ export class SubPopupMenu extends React.Component {
           (c, i) => this.renderMenuItem(c, i, eventKey || '0-menu-'),
         )}
       </DOMWrap>
-      /*eslint-enable */
     );
   }
 }

tests/Menu.spec.js

@@ -97,6 +97,24 @@ describe('Menu', () => {
     expect(wrapper.find('MenuItem').first().props().active).toBe(true);
   });
 
+  it('should render none menu item children', () => {
+    expect(() => {
+      mount(
+        <Menu activeKey="1">
+          <MenuItem key="1">1</MenuItem>
+          <MenuItem key="2">2</MenuItem>
+          string
+          {'string'}
+          {null}
+          {undefined}
+          {12345}
+          <div />
+          <input />
+        </Menu>
+      );
+    }).not.toThrow();
+  });
+
   it('select multiple items', () => {
     const wrapper = mount(
       <Menu multiple>