Ember.js: onclick={{action 'myAction'}} doesn't work on svg elements

[andressrg]

Adding onclick={{action 'myAction'}} to an svg element does not work as expected and throws an error.

The action function seems to be inlined on the element. But still throws an error.

Reproduction twiddle: https://ember-twiddle.com/ab12e8e67d1fb5ae7783aa2703a13043?openFiles=templates.components.my-svg.hbs%2Ctemplates.components.my-svg.hbs

• Open the console
• Click on Here it works -> console prints Clicked!
• Click on The black SVG triangle -> console prints Uncaught SyntaxError: Unexpected token (

[rwjblue]

When in the svg namespace we always set attribute (not properties). When you set an attribute to a function, it will set the attribute to the string value of the function instead.

[pixelhandler]

@andressrg It sounds like we need more documentation on SVG use in component, especially regarding actions. I didn't know that when using SVG the attribute will become the string value. So It sounds like you may need a workaround. How about using browser events instread?

See https://ember-twiddle.com/397a27e5a050c5caf35bd4f2a8b37af1?openFiles=components.my-svg.js%2Ctemplates.components.my-svg.hbs

@locks is there documenation available or in the works regarding using SVG elements in Ember components?

[krisselden]

@rwjblue I think if onclick={{action 'my-action'}} works on any element it should work on all elements that support onclick no? I'm going to label this as a bug.

[rwjblue]

@krisselden - I was not justifying that the current behavior was correct, I was explaining what is happening.

[mixonic]

This would also be addressed by attr-first-but-special-behavior-when-type-of-function in Glimmer

[tonyhschu]

Any word on what the fix might be?

[lifeart]

UP, same error with Glimmerjs

[lllama]

Just seen this in Glimmer as well - if anyone has a work around then that would be great.

[lifeart]

@lllama, @tonyhschu this works for me:

<polygon points="300,1007.5 300,1550 0,775 300,0 300,542.5 2050,542.5 2050,1007.5"
    {{action "someAction"}}> </polygon>

[fyzwjd]

When I use onmouseover={{action "someAction"}} - it has similar problem

[MrChriZ]

I ran into this with FontAwesome 5. I didn't even get any console error messages.
Lifearts fix worked for me however.

[pixelhandler]

@MrChriZ @andressrg @fredguth @fyzwjd @krisselden @lifeart @lllama @mixonic @rwjblue @tonyhschu is this still an issue, perhaps we should close or create a new reproduction of this, what do you think?

[pixelhandler]

Closing for now, feel free to re-open if you can reproduce in the current release of Ember.

• https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md#triaging-policy

[shanekoss]

This works great in Chrome, but without onclick, you can't get an event to make this work in Firefox. Any other workarounds?