Material-ui: [Popover] event handlers issue (mouseEnter and mouseLeave)

[imornar]

Problem description

I'm trying implement popover which shows on mouseEnter and hides on mouseLeave - using popover example template from http://www.material-ui.com/#/components/popover

The issue occurs onMouseEnter event, when I hover over then Button both mouseEnter and mouseLeave handlers are being called in sequence. That prevents Popover template to show up.
mouseEnter event -> mouseEnter handler + mouseLeave handler

When I move mouse off the button then just mouseLeave handler is called - as expected.
mouseLeave event -> mouseLeave handler

Link to minimal working code that reproduces the issue

Reproducable link https://codesandbox.io/s/66nj8qRBR

Versions

• Material-UI: 0.18.7
• React: 15.15.3
• Browser: Chrome

[oliviertassinari]

This behavior is expected. The Popover has the modal behavior, meaning it blocks all interactions with the rest of the page. Prefer the Popper component in this case.

[jacaetevha]

@oliviertassinari can you confirm that this is _actually_ the expected behavior. The @imornar said this, which doesn't make sense to me as an expected behavior.

mouseEnter event -> mouseEnter handler + mouseLeave handler

I'm seeing this as well. I would have expected the mouseEnter event to only call the mouseEnter handler, not the leave handler also.

[resson-ntranquilla]

@oliviertassinari how to we disable the popover backdrop over the page?

[oliviertassinari]

@resson-ntranquilla We will work on that in the future: #11243.

[msreekm]

is there a solution to the above? (mouseEnter event + mouseLeave handler) firing at the same time when mouseEnter happens?

[konradwww]

The Popover has the modal behavior, meaning it blocks all interactions with the rest of the page. Prefer the Popper component in this case.

However, if you want to stick to the Popover anyway, there is workaround to fix it:

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

[emery1188]

Thank You @konradwww. This saved my life.