Hover bug: If you mouse in and out of element quickly hover appears but then doesn't go away

[paulwehner]

As said in the title, if you enter and then leave a component quickly the hover background will come up but then not go away. So only the 'handleMouseEnter' event will fire, and not the 'handleMouseLeave'. To trigger the 'handleMouseLeave' you have to mouse back over the component slowly and then mouse out. I've noticed the same thing if you do a handleMouseDown and handleMouseUp, and then do a fast click. Only the first event will register, and the mouseUp event won't be registered.

[qimingweng]

I think hovering will continue to be a hard problem for inline styles. I like how JSS solves it, which is through classnames. Since JSXStyle also can export to classnames, maybe there can be a declarative way of adding hover/active styles this way too? Not sure what the API would look like though.

[petehunt]

Do you have a repro for this? I've seen it sporadically drop mouseEnter and mouseLeave events

[qimingweng]

One way I've achieved it in the past is if I hover over the element, use command tab to switch to a different app, then switch back and have the cursor already outside of the element.

[petehunt]

I fixed this at Smyte using this component: https://gist.github.com/petehunt/c2a1aa6bb30cb4699bd8

If there is significant interest I'd probably be OK moving this and its corresponding ClickRegion component into jsxstyle, or we could see if @spicyj would want a new EnterLeaveEventPlugin that uses hit testing.