Events are not properly bound to SVG elements

[ondrejsevcik]

Hi, I've found a small inconsistency when working with SVG and actions in Ember.

I've tried to bind action on mouseEnter on rect element but it doesn't work with ember action.

<rect onMouseEnter={{action "log"}}></rect>

With div, this works without any problem.

I’ve also tried to handle it with native javascript and that works.

<rect onmouseenter="javascript:alert('native works')"></rect>

Here's the twiddle with reproduction
https://ember-twiddle.com/d9db8b82d40cbc4fcfb4c33cff34ab4e?openFiles=templates.application.hbs%2C

[rwjblue]

I don't believe this is a bug per-se, using the element modifier version of {{action}} works properly:

https://ember-twiddle.com/eef22b20be320ac16259b5ce0b4f0b17?openFiles=templates.application.hbs%2C

The way Ember assigns things to an element depends on what type of Element it is. Specifically, if the element has a property for the thing being assigned (onmouseenter) we set it as a property (el.onmouseenter = value), if it does not find that particular property in the element we set an attribute (el.setAttribute('onmouseenter', value)). Unlike "normal" HTML elements, SVG elements often do not have properties on their prototype chain for events, therefore assigning a function to rectElement.onmouseenter has no effect.

Using the element modifier version of {{action}} is the right way to handle eventing when dealing with SVG elements, though a future RFC (e.g. emberjs/rfcs#314) may change that.

[ondrejsevcik]

Using element modifier version of action helper doesn't help in my case as I need to get mouse coordinates from mouse event object. But this event object is not passed in when using modifier version.

As a workaround I've created a component with a tagName: 'rect' and attach required mouse events on it. That works, but it still feels like a workaround, especially when assigning action to property on any other HTML element works.