[BUG] Popover wrapped menu item always has css ".MuiModal-hidden-114 {visibility: hidden}"

I use the code below to render navbar menu

// ScriptsMenu
		return (
			<div>
			<RaisedButton onClick={this.onClick} 
				label={this.label }/>
			{/*
				transformOrigin={this.state.transformOrigin}
				onRequestClose={this.onRequestClose}

			*/}
			{/*
			<Popover
				open={this.getState.open}
				anchorEl={this.getState.anchorEl}
				anchorReference={this.anchorReference}
				anchorOrigin={this.state.anchorOrigin}
				transformOrigin={this.state.transformOrigin}
				onClose={this.onRequestClose}>
			*/}
			<Popover
				open={this.getState.open}
				anchorEl={this.getState.anchorEl}
				anchorReference={this.anchorReference}
				anchorOrigin={this.state.anchorOrigin}
				transformOrigin={this.state.transformOrigin}
				onClose={this.onRequestClose}>

			{/*
			<Menu
				open={this.getState.open}
				anchorEl={this.getState.anchorEl}
				transformOrigin={this.transformOrigin}
				onClose={this.onRequestClose}>
			*/}
			{/*
			// @desc material-ui@v1.0.0 no longs delegates the usage of menu
				<Menu>
			*/}
			
			{/*
			// @desc material-ui@v1.0.0 cannot detect prop primaryText
					<MenuItem value={1} primaryText="open" />
					<MenuItem value={2} primaryText="imports" />
					<Divider />
			*/}
					<MenuItem value={1}>open</MenuItem>
					<MenuItem value={2}>imports</MenuItem>
					<Divider />

			{/*
				</Menu>
			*/}
			
			{/*
			</Popover>
			*/}
			</Popover>

			{/*
			</Menu>
			*/}
			</div>

I found the initial position of menu items are randomly placed. along side drawer not under the menu button.

Once you click it. It disappears and no long shows up again because this css attribute:

.MuiModal-hidden-114 {visibility: hidden}

You disable it, it shows up in correct position under the button.

HERE ARE MY entry codes:

@inject("store") @observer
export default class Editor extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {
		return (
			<MuiThemeProvider theme={muiTheme}>
			<Root />
			</MuiThemeProvider>

		)
	
	}

}

The Root contains the Navigation element

@inject("store") @observer
class Root extends React.Component {
	constructor(props) {
		super(props)

		this.state = {
			open: false
		}
		this.observableState = new ObservableState()

		this.handleDrawerOpen = this.handleDrawerOpen.bind(this)
		this.handleDrawerClose = this.handleDrawerClose.bind(this)
		this.getState = this.getState.bind(this)
	}

	render() {
		const {classes, theme} = this.props
		const drawerStyle = {
			paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose)
		}

		return (
			<div className={classes.root}>

			<AppBar id="editor"
				position="absolute"
				className={classNames(classes.appBar, this.state.open && classes.appBarShift)}>
				<Navigator 
					handleDrawerOpen={this.handleDrawerOpen}
					getState={this.getState} />
			</AppBar>

			<Drawer variant="permanent"
				classes={drawerStyle}
				open={this.state.open}>
				<div className={classes.toolbar}>
					<IconButton onClick={this.handleDrawerClose}>
						{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
					</IconButton>
				</div>
				<Divider />
				<List>
					<ListItem button>
						<ListItemIcon>
							<MailIcon />
						</ListItemIcon>
						<ListItemText primary="All mail" />
					</ListItem>
					
					<ListItem button>
						<ListItemIcon>
							<DeleteIcon />
						</ListItemIcon>
						<ListItemText primary="Trash" />
					</ListItem>

					<ListItem button>
						<ListItemIcon>
							<ReportIcon />
						</ListItemIcon>
						<ListItemText primary="Spam" />
					</ListItem>
				</List>
			</Drawer>
			
			{/*
			<main className={classes.content}>
			<Scene />
			</main>
			*/}
			<main className={classes.content}>
			</main>

			</div>
			
		)

	}

	handleDrawerOpen() {
		this.setState({open: true})
		this.observableState.toggleState("open")
	}

	handleDrawerClose() {
		this.setState({open: false})
		this.observableState.toggleState("open")
	}

	getState() {
		return this.observableState.state
	}

}

Root.propTypes = {
	classes: PropTypes.object.isRequired,
	theme: PropTypes.object.isRequired
}

export default withStyles(styles, {withTheme: true})(Root)

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Use the codes provided above will reproduce the problem.

1. reproduce Root with side drawer effect
2. reproduce Navigator (A Toolbar list) with
3. reproduce the menu
4. check in browser

Context

Summary

How can I make sure the menu placed initialized in right place and eliminate the side css effects

.MuiModal-hidden-114 {visibility: hidden}

React css in code is already not human maintainable compared to css3 written in less with design conventions in mind.

Your Environment

Tech	Version
Material-UI	material-ui@1.0.0-rc.0
React	16.3.0
browser	chrome
etc

[dushajni]

I had that bug but I think solved it with updating all react/redux related dependencies to newest versions.

[aguilera51284]

hello. this error is the same in Selects 😦!