JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<body>
<div id="container"></div>
<div id="logdiv"></div>
</body>
Babel + JSX
function log(txt) {
const logdiv = document.getElementById('logdiv');
if (txt) {
logdiv.innerHTML += txt + '<br/>';
} else {
logdiv.innerHTML = '';
}
}
function logMouseEnter() { log("enter") }
function logMouseLeave() { log(" onMouseLeave (react)") }
function logNativeMouseLeave() { log(' mouseleave (native)') }
function clearLog() { log() }
var ToolTipOverDisabledButton = React.createClass({
getInitialState() {
return { disabled: false };
},
toggleDisabled() {
clearLog();
this.setState({
disabled: !this.state.disabled
});
},
render() {
return (
<div onMouseEnter={logMouseEnter} onMouseLeave={logMouseLeave}
ref={(e) => {
this.hoverElement = e;
}}
>
<button disabled={this.state.disabled} onClick={this.toggleDisabled}>{this.state.disabled ? 'onMouseLeave is broken, but native mouseleave works' : 'hover over me, then click to reproduce onMouseLeave bug'}</button>
</div>
);
},
// Fix
componentDidMount() {
this.watchForNativeMouseLeave();
},
componentDidUpdate() {
this.watchForNativeMouseLeave();
},
// onMouseLeave doesn't work on disabled elements.
// https://github.com/facebook/react/issues/4251
watchForNativeMouseLeave() {
this.hoverElement.addEventListener('mouseleave', () => {
if (this.state.disabled) {
logNativeMouseLeave();
}
});
},
handleMouseOut() {
logNativeMouseLeave();
}
});
ReactDOM.render(
<ToolTipOverDisabledButton />,
document.getElementById('container')
);