Problem with 'onclick' on SVG elements

[Jon Kleiser]

I'm building an SPA that shall make extensive use of SVG. This far I have not been able to get any form of 'onclick' working on my SVG elements. I have tried both $onclick="test" and onclick={e => this.run("test", e)}, in elements like these:

<circle cx={cx} cy={cy} r={rad} $onclick="test"/>
<rect x="8" y="8" width="90" height="90" stroke="blue" onclick={e => this.run("test", e)}/>

This, however, works fine: <h1 onclick={e => this.run("test", e)}>TEST</h1>
I'm using apprun 2.23.12. Is this a bug?

[Jon Kleiser]

This works, at least in Safari and Brave Browser:

<rect x="10" y="80" width="90" height="40" stroke="blue" onclick="alert('You clicked the rect.')"/>

[Yiyi Sun]

Are you using HTML or JSX? $onclick only works in JSX.

[Jon Kleiser]

I'm using JSX.

view = (state) => <div>...

[Jon Kleiser]

You can try with this, e.g. inside the SPA's ContactComponent:

<svg viewBox="0 0 520 520" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="90" height="40" onclick={e => this.run("test", e)}/>
  <rect x="10" y="80" width="90" height="40" onclick="alert('You have clicked the rect.')"/>
</svg>

and then this:

update = {
  "test": (state, evt) => {
    console.log("test: %s", evt.target);
    return state;
  }
}  

[Yiyi Sun]

I see. Then it appears to be a bug. Will fix it.

…

On Mon, Apr 13, 2020 at 4:16 PM Jon Kleiser ***@***.***> wrote: You can try with this, e.g. inside the SPA's ContactComponent: <svg viewBox="0 0 520 520" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="90" height="40" onclick={e => this.run("test", e)}/> <rect x="10" y="80" width="90" height="40" onclick="alert('You have clicked the rect.')"/> </svg> and then this: update = { "test": (state, evt) => { console.log("test: %s", evt.target); return state; } } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#94 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABJUM7LDS6OJXJMERQ5SZTRMNXK5ANCNFSM4MG7ROSA> .

[Yiyi Sun]

It is now fixed in v2.23.13. I also added it as an example in the playground.
https://apprun.js.org/#play/23

[Jon Kleiser]

Thanks! Works fine now.