:hover gets wrong events
wbecker opened this issue · 3 comments
I have several rows which have hover styles. If I move my mouse over them slowly everything is fine.
When I move the mouse over them quickly I found that the hover styles were remaining.
I logged the e.target of the events that were happening onMouseEnter and onMouseLeave in resolve-interaction-styles-plugin.js and found that when the hover style was not being removed -e.target had the value of the next element that was entered, not the value that was left.
So this doesn't seem like the fault of radium, but it seems like something you may need to deal with! I would expect :hover to be a unique property that can only exist on a single element - it should not be able to get into a state where two different elements have the hover state at the same time.
I guess this implies some sort of global state than ensures this?
Can you provide a repro in jsbin or similar? Also, what browser/os? In the examples there is a grid of 10x10 squares with :hover on each one, does it repro there for you?
I'll have a try - but you can see in the code here that it relies upon the assumption of an onLeave matching an onEnter. If this assumption ever breaks for whatever reason you will have this issue.
I'm a bit bothered we haven't properly solved this, but I can't think of a good way to ensure only a single stack is hovered (child and all parents). Closing for now.