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

[yiakwy]

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 [email protected] no longs delegates the usage of menu
                <Menu>
            */}

            {/*
            // @desc [email protected] 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 | [email protected] |
| 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.

[oliviertassinari]

@yiakwy Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Also, try to keep the reproduction as simple as possible. Thank you!

[nslocum]

@yiakwy: I ran into the same issue.
You should be able to resolve it by updating your react and react-dom packages to ^16.3.0.

If you're unable to upgrade, you can force popovers to be visible by applying this style globally.
.MuiModal-hidden-65 { visibility: visible !important; }
There may be unintended consequences of using this style. That said, I haven't seen any.

[yiakwy]

@nslocum @dushajni I just tried both versions of 16.3.0 and ^16.3.2. They don't work properly.

@oliviertassinari I will try it. The codes heavily depend on module-resolver and webpack aliases. I need to customize the codes the version which be displayed.

[nick-da-silva-m3]

Is there anything on the material-ui site about having to update react and react-dom to 16.3 for dialog,modal and popovers to work? Wasted a couple hours looking into it before I came across this. Updating to 16.3 fixed modal and dialogs for me. Haven't tested popovers.

[oliviertassinari]

Is there anything on the material-ui site about having to update react and react-dom to 16.3

@nick-da-silva-m3 It's in the breaking changes changelog of the v1.0.0-rc.0 release. Also, you must have a warning when running npm install.

[yiakwy]

I just found the problem. Two props are important to position the Popover menus:

1. anchorEl should not be undefined
2. anchorReference should be defined as 'anchorEl'

I made a mistake in using %s/target/transform/gci to rename targetOrigin to transformOrigin and just to find evt.currentTarget to evt.currentTransform, which makes anchorEl undefined.

I also messed up in this.state.anchorEl

I fixed them. They work fine again

Thanks to @oliviertassinari @dushajni @nslocum again.

[aguilera51284]

hello. this error is the same in Selects :(!

[yiakwy]

@aguilera51284 Hi according to the documentation, the css generated is non deterministic, you should not rely on it. According my experiences, it might have relationship in

1. anchorEl
2. anchorReference

Which is very important in positioning new popover (v1.0.0.rc-0) children.

[tupy]

@aguilera51284 I got the same error with Select and Drawer.
Updating react and react-dom to 16.3.0 fixed both

[oliviertassinari]

Duplicate of #11414