I'm trying to simulate a hover event in React. So I am using onMouseEnter and onMouseLeave that triggers the statechange.

Unfortunately when I first enter the Element with the mouse both methods are triggered...

When I leave the Element only onMouseLeaveis triggered. Does anyone knows why the methodonMouseLeave` is triggered on entering the element.

Here is my Code:

   handleOver(event){
        event.preventDefault();
        console.log('enter');
        if(this.state.open === false){
            this.setState({
                open: true,
                anchorEl: event.currentTarget,
            });
        }
    }
    
    handleLeave(event){
         event.preventDefault();
         console.log('leave');
         if(this.state.open === true){
             this.setState({open: false})
         }
    }

                    <img
                        onMouseEnter={this.handleOver}
                        onMouseLeave={this.handleLeave}
                        src={InfoIcon}
                    />
                    
                    <Popover
                        open={this.state.open}
                        anchorEl={this.state.anchorEl}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                        targetOrigin={{horizontal: 'left', vertical: 'top'}}
                        onRequestClose={this.handleLeave}
                        muiTheme={darkBaseTheme}
                    />

I'm trying to simulate a hover event in React. So I am using onMouseEnter and onMouseLeave that triggers the statechange.

Unfortunately when I first enter the Element with the mouse both methods are triggered...

When I leave the Element only onMouseLeaveis triggered. Does anyone knows why the methodonMouseLeave` is triggered on entering the element.

Here is my Code:

   handleOver(event){
        event.preventDefault();
        console.log('enter');
        if(this.state.open === false){
            this.setState({
                open: true,
                anchorEl: event.currentTarget,
            });
        }
    }
    
    handleLeave(event){
         event.preventDefault();
         console.log('leave');
         if(this.state.open === true){
             this.setState({open: false})
         }
    }

                    <img
                        onMouseEnter={this.handleOver}
                        onMouseLeave={this.handleLeave}
                        src={InfoIcon}
                    />
                    
                    <Popover
                        open={this.state.open}
                        anchorEl={this.state.anchorEl}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                        targetOrigin={{horizontal: 'left', vertical: 'top'}}
                        onRequestClose={this.handleLeave}
                        muiTheme={darkBaseTheme}
                    />

• javascript
• reactjs

• Which version of react are you using. This may be related to this bug : https://github./facebook/react/issues/10906 – 3Dos Commented Feb 14, 2018 at 8:54
• I am using version 15.6.1 – Lorenz Weiß Commented Feb 14, 2018 at 13:00

1 Answer 1

Technically, this is not a bug, since the onMouseEnter event is triggered correctly, which causes the Popover ponent to render with a backdrop over the page, which triggers the onMouseLeave event.

This "issue" is discussed at [Popover] event handlers issue (mouseEnter and mouseLeave) #7680.

Credit goes to konradwww, for listing the following explanation, that leads to the behavior any sane person would expect:

<Popover
style={{ pointerEvents: 'none'}}
...