New Components Menu and MenuItem doesn't work

[eyscode]

I've tried to use the new components Menu and MenuItem in a project as the website shows but I couldn't, when the component is rendered the menu is not visible and width is always 0, I thought it was a problem with styles of my project, so I tried to use it in clean tiny example just for seeing if it works or not, and sadly it doesn't.

This is the code:

var React = require('react');
var Menu = require('material-ui/lib/menus/menu');
var MenuItem = require('material-ui/lib/menus/menu-item');
var ThemeManager =  require('material-ui/lib/styles').ThemeManager;
var themeManager = new ThemeManager();

var styles = {
    menu: {
        marginRight: 32,
        marginBottom: 32,
        float: 'left',
        position: 'relative',
        zIndex: 0
    }
};

var App = React.createClass({
    contextTypes: {
        router:React.PropTypes.func
    },
    childContextTypes: {
        muiTheme:React.PropTypes.object
    },
    getChildContext:function() {
        return {
                muiTheme: themeManager.getCurrentTheme()
        };
    },
    render: function(){
    return (
        <Menu style={styles.menu}>
          <MenuItem primaryText="Maps" />
          <MenuItem primaryText="Books" />
          <MenuItem primaryText="Flights" />
          <MenuItem primaryText="Apps" />
        </Menu>);
    }

});

React.render(<App/>, document.getElementById('app'));

As you can see it is the almost the same code as the example in the website demo, but the menu is not visible. What's the problem? Are the new Menu and MenuItem components already finished and ready for production? Thanks in advance.

[inoc603]

I'm getting the same problem here. The component is rendered but not visible

[vespakoen]

👍 Same is happening here

[micaste]

👍

[zachguo]

Same for ListItem, the component is rendered but not visible.

[zachguo]

Well, it's working after I upgraded material-ui to latest version.

[micaste]

@zachguo what last version do you talk about ? I encounter the bug mentioned by @eyscode with version 0.10.1 that is for now the latest released version.

[eyscode]

@zachguo List and ListItem works fine in the latest version, I've even had to use those component instead of Menu and MenuItem because the bug.

[ieiayaobb]

I've got a log in the console:
Uncaught TypeError: Cannot read property 'length' of undefined
it points to this line of the source file(menu.js)
for (var i = 0; i < this.props.menuItems.length; i++) {

[eyscode]

It seems like you are using the old Menu and MenuItem components, I saw the same error log when I imported those components by mistake.

Old components:

import {Menu, MenuItem} from 'material-ui';

New components:

import Menu from 'material-ui/lib/menus/menu';
import MenuItem from 'material-ui/lib/menus/menu-item';

Anyway the new ones don't work properly, so I suggest using List and ListItem for now.

[ieiayaobb]

@eyscode
I tried as you said, same problem with you have described.
I'm going to use List instead.

Anyway thanks for your advice.

[eyscode]

I've updated to the latest version of material-ui (v0.10.3) and the new Menu component works fine now. It seems like the bug was fixed in #1281. I'm closing the issue, thanks for your time.

[cvince]

this is still a problem. When you

import {Menu, MenuItem} from 'material-ui'; 

it's still referencing the old material-ui/lib/menu/menu.js

[austinmao]

I am still seeing this problem with the latest Master branch build.

This results in a length undefined error

import {Menu, MenuItem, MenuDivider} from 'material-ui';

This results in an invisible menu:

import Menu from 'material-ui-updated/lib/menus/menu';
import MenuItem from 'material-ui-updated/lib/menus/menu-item';

[AtNovember]

Dear developers!
Please, update your documentation!

`Cuz i had the same stack

[ingridoberbuchler]

Is there solution, please? I have same problem.

[ivanberry]

Problem still, Any solution?