Simulate.mouseEnter and Simulate.mouseLeave not working

[leoasis]

While testing I wanted to simulate mouseEnter and mouseLeave events, but for some reason they are not firing the handlers in the component.

Here's a fiddle to show you: http://jsfiddle.net/leoasis/RH2vm/
You'll see that with the Simulate functions, only the click is actually triggered, while the other ones not. With the real events everything works perfectly.

I tried to debug a little bit what's going on, but didn't get much information, especially since it's the first time I'm diving into the events mechanism internals in React.

If you want more info, then I can try and dig a bit deeper, but I think the fiddle is clear enough.

[sophiebits]

Yeah, unfortunately mouseEnter/mouseLeave don't get simulated properly at the moment due to their unique bubbling situation. The biggest blocker here is picking a good API, I think.

Maybe just Simulate.mouseEnterLeave(from, to)?

[leoasis]

Why should the user care about where the mouse moves from/to? Perhaps this can be handled internally? Is the problem due to bubbling here? I may need to dive into the code a little more to get a better understanding and stop saying nonsense :P

[sophiebits]

Yes, it's due to bubbling. If you have the DOM structure

<A>
  <B><C /></B>
  <D />
</A>

and your mouse moves from C to D, then C and B receive mouseleave events, D receives a mouseenter event, and A receives nothing. All other events bubble up to the root.

Perhaps it's good enough to just make simulated mouseEnter and mouseLeave events not bubble at all.

[leoasis]

That would work at least where I was trying to test. While testing I generally don't need anything too complex, just making sure the right behavior triggers when the event happens. Hopefully that's the way others do as well

[sophiebits]

(As a workaround for now, you can use SimulateNative.mouseOver and SimulateNative.mouseOut (making sure to specify relatedTarget appropriately on each) and together they will cause React to fire onMouseEnter and onMouseLeave events.)

[tiye]

Do we have a good solution for such case now? I'm trying my solution but feeling so tricky.

    componentDidMount: ->
      root = @refs.root.getDOMNode()
      root.onmouseenter = @onMouseEnter
      root.onmouseleave = @onMouseLeave

    onMouseEnter: (event) ->
      console.log 'enter\t', event.target.className
    onMouseLeave: (event) ->
      console.log 'leave\t', event.target.className

And I got still quite strange results:

enter    side-rooms-view
enter    
leave    side-rooms-view
enter    side-rooms-view
enter    side-rooms-header list-title
leave    side-rooms-view

[ryanzec]

@spicyj can you give an example. I can't find any documentation on SimulateNative or how to set relatedTarget appropriately?

[blakehaswell]

@ryanzec You want to do something like this:

function simulateMouseOver(from, to) {
    simulateNative.mouseOut(from, { relatedTarget: to });
    simulateNative.mouseOver(to, { relatedTarget: from });
}

The simulates the mouse moving from one element to another. The from element can be anything really, it’s not important.