yew throw error when try to render svg in a vnode props after Mouseevent is triggered

[dancespiele]

Problem

I have a component which I pass a vnode in one of its props, in that it has a svg inside of a div tag,
that div tag has a onclick event. Until this point it works and the svg is shown. Now I trigger the onclick event, and I get this error:

wasm-bindgen: imported JS function that was not marked as `catch` threw an error: expected a string argument

Stack:
passStringToWasm0@http://localhost:1234/yew_style_page.js:76:41
init/imports.wbg.__wbg_className_ad0388ecc9b6acf5<@http://localhost:1234/yew_style_page.js:768:37
logError/<@http://localhost:1234/yew_style_page.js:214:22
web_sys::features::gen_Element::Element::class_name::h0c0f0633280c15c0@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[7481]:0x385940
<yew_styles::components::modal::Modal as yew::html::Component>::update::hecb852325cc33e3a@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[971]:0x21e13b
<yew::html::scope::UpdateComponent<COMP> as yew::scheduler::Runnable>::run::h6ce55d74a53b6690@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[298]:0x17a531
yew::scheduler::Scheduler::start::hfcd91cb63ef0302c@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[956]:0x21be86
yew::scheduler::Scheduler::push_comp::h3606bb223f930df8@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[832]:0x20810c
yew::html::scope::Scope<COMP>::update::h563bcd28df6c6777@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[1994]:0x28b223
yew::html::scope::Scope<COMP>::send_message::h974f90d7f6adf72d@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[5436]:0x343a0a
yew::html::scope::Scope<COMP>::callback::{{closure}}::h5352e5a6a241aef0@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[7711]:0x38bf77
yew::callback::Callback<IN>::emit::h92d718f6b06d1fc4@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[1481]:0x25c2e5
<yew::html::listener::listener_web_sys::onclick::Wrapper as yew::virtual_dom::Listener>::attach::{{closure}}::hbe7b8e93ec37a6d9@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[5964]:0x35681f
<dyn core::ops::function::FnMut<(&A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h320454d78e9814a4@http://localhost:1234/yew_style_page_bg.wasm:wasm-function[2793]:0x2c31ec
__wbg_adapter_22@http://localhost:1234/yew_style_page.js:245:14
real@http://localhost:1234/yew_style_page.js:201:20

• If I put a text for example instead of the svg, it works without get any error.
• If I use the same logic outside of the props it works without get any error.
  Steps To Reproduce
  Steps to reproduce the behavior:
• git clone [email protected]:spielrs/yew_styles.git
• git checkout no-render-svg-vnode-props
• npm install and npm start
• click in the left in modal and after in the right side scroll down and click in the button Form modal
• inside of the modal opened click in the icon, you will notice that it breaks the browser and you will
  see the error that I mentioned before
• Now reload and repeat the same process however click in the text instead of the icon, you will see that
  the onclick event works

The issue happens because there is a typeof comparator and when it is not string it throws an error, if you debug it you will realize that in some point you will get the svg object instead of the args variable

You will find the code in crate/src/page/modal_page.rs

Expected behavior
This issue shouldn't happen doesn't matter what I include in this vnode prop

Screenshots

Environment:

• Yew version: master
• Rust version: 1.44.0 stable
• Target, if relevant: [e.g. wasm32-unknown-unknown]
• Web library: web-sys
• OS, if relevant: Solus linux
• Browser and version, if relevant: Firefox 77.0.1

Questionnaire

• [ ] I'm interested in fixing this myself but don't know where to start
• [ ] I would like to fix and I have a solution
• [ ] I don't have time to fix this right now, but maybe later
• [x] I can take a look but I cannot promise anything then if someone can take a look and resolve the issue would be great

[siku2]

Could you please add a link to the relevant code for the component?

[dancespiele]

@siku2 I added already crate/src/page/modal_page.rs
github link: https://github.com/spielrs/yew_styles/blob/no-render-svg-vnode-props/crate/src/page/modal_page.rs

[siku2]

@dancespiele I finally got the chance to take a look, sorry for the delay!

The issue is actually in your Modal component. Its onclick listener fires when you click on the icon and executes the following code:
https://github.com/spielrs/yew_styles/blob/0afc6482eb31892db9697dfed4f620a70f81475e/crate/yew_styles/src/components/modal.rs#L181-L192

The issue here is the call to class_name(). You see, it works perfectly fine for normal html elements but SVGs are special. SVGElement overwrites the className attribute so that it no longer returns a string but an instance of SVGAnimatedString (Please see the notes on Element.className which mention this).

web-sys doesn't handle this gracefully which is why you get the type error. Please see https://github.com/rustwasm/wasm-bindgen/issues/2091 for more details.

You can verify that this is the problem by commenting out the code.

There are two ways to solve your issue. You can use get_attribute("class") to get the raw attribute string or use the class_list list.

[dancespiele]

Thanks a lot @siku2! I will try to work around as you suggest and in case that I can I will close the ticket.

[dancespiele]

I changed to class_list and works. Thanks @siku2 !