Material UI+React hovering on tabs will not open and close properly

Question

currently I am working on a project with React and Material UI. I want to hover on tabs that will open an menu, but this doesn't really work. I am hoping that you guys can help me (and maybe tell me if I'm approaching this correctly)

Where my tabs are basing of: https://i.sstatic.net/jVlIm.jpg

My current project: https://i.sstatic.net/sIJzq.jpg

AppBarTop class

class AppBarTop extends Component {

    state = {
        value: 0,
        open: false,
        anchorEl: null
    };

    handleMenuClick = (index) => {

    }

    handleMenuOpen = (index, event) => {
        const {currentTarget} = event;
        this.setState({
            open: !this.state.open,
            anchorEl: currentTarget,
            value: index
        })
    };

    handleMenuClose = () => {
        this.setState({
            open: false,
            anchorEl: null,
        })
    }

    handleInputSearch = () => {

    };


    render() {
        const {classes} = this.props;
        const {anchorEl, open} = this.state;


        return (
            <div className={classes.root}>
                <AppBar position="static">
                    <Toolbar>
                        <img src={buddies} alt={"buddies"} height={50} width={50}/>

                        <div className={classes.grow}/>
                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon/>
                            </div>
                            <InputBase
                                placeholder="Search…"
                                onChange={this.handleInputSearch}
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput
                                }}
                            />
                        </div>
                        <div className={classes.grow}/>

                        <List>
                            {TopMenu.map((item, index) => (

                                <Tab key={index} component={Link} to={{pathname: item.pathname}}
                                     classes={{root: classes.tabItem}} label={item.label}/>
                            ))}
                        </List>

                    </Toolbar>
                    <Paper className={classes.grow}>
                        <Tabs
                            value={this.state.value}
                            indicatorColor="primary"
                            textColor="primary"
                            centered>
                            {BottomMenu.map((item, index) => (
                                <Tab
                                    key={index}
                                    onMouseOver={this.handleMenuOpen.bind(this, index)}
                                    data-key={index}
                                    classes={{root: classes.tabItem}}
                                    label={item.label}
                                    aria-owns={open ? 'menu-list-grow' : undefined}
                                    aria-haspopup={"true"}/>
                            ))}
                        </Tabs>
                        <Popper open={open} anchorEl={anchorEl}  id="menu-list-grow">
                            <Paper>

                                    <MenuList>
                                        {BottomMenu[this.state.value].items.map((item, index) => (
                                            <MenuItem key={index} onClick={this.handleMenuClose}>{item}</MenuItem>
                                        ))}
                                    </MenuList>

                            </Paper>
                        </Popper>
                    </Paper>

                </AppBar>
            </div>

        );
    }
}

export default withStyles(styles)(AppBarTop)

Answer 1

The key problem here is that the onMouseOver event handler is fired multiple times as you move around the <Tab> component. Your handleMenuOpen function is not built to handle this.

I've replicated your issue in a CodeSandbox here: https://codesandbox.io/s/qkw8rr4mk4

The following 3 points will fix your menu issues:

1. Change handleMenuOpen to be functional by explicitly setting open: true
2. Use onMouseEnter rather than onMouseOver. This is not required but it makes for more predictable functionality as onMouseEnter is only called once
3. To automatically close your menu when your mouse leaves them add the onMouseLeave={this.handleMenuClose.bind(this)} property to your parent <div> component

A CodeSandbox with the above 3 points implemented can be found at: https://codesandbox.io/s/6x9w9m6n7r