Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: onMouseLeave does not trigger on disabled button

See original GitHub issue

Derived from https://github.com/facebook/react/issues/4251#issuecomment-591644826

React version: 16.13.1

Steps To Reproduce

Hover over the disabled button
See tooltip appear
Hover away from the disabled button
Tooltip does not disappear

Link to code example: https://codesandbox.io/s/gracious-galileo-qymqw?file=/src/App.js

The current behavior

onMouseLeave is not triggered on disabled button

The expected behavior

onMouseLeave should be triggered on disabled button

I don’t think #17675 actually made onMouseEnter not fire on disabled buttons, since in the example that I’ve given, it is firing and using the latest React version (the PR has been shipped in 16.13.0)

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

5reactions

7kmscommented, May 15, 2020

has been resolved by onPointerEnter and onPointerLeave?

2reactions

doureydcommented, Jul 15, 2020

FYI Using onPointerEnter and onPointerLeave fix the issue but it’s not supported by all browsers yet.

Top Results From Across the Web

React does not fire onMouseLeave events on a disabled button

In the end I think the best solution will be to simply fake the disabled state of the button instead of actually disabling...

Mouseenter event not thrown on disabled elements in chrome

I created an Angular directive which automatically disables a button if a certain condition is met. Additionally, a small tooltip ...

11382 (Mouseenter doesn't fire on a disabled input element)

This was done intentionally in jQuery.event.dispatch based on #6911 to normalize a cross-browser behavior. However it seems inadvisable for us to do it, ......

trigger | Cypress Documentation

trigger. Trigger an event on a DOM element. It is unsafe to chain further ... off 'cy' cy.clock().trigger('mouseleave') // Errors, 'clock' does not...

Pointer events - Web APIs | MDN

Note: Pointer events are not available in Web Workers. ... boundaries of an element; firing the pointerup event for a device that does...