Selenium IDE Breaks Liveview

[nikhiljha]

Problem

If you have Selenium IDE installed as a Chrome extension, and you open a page using LiveView, LiveView isn't able to respond to user-initiated events. If state changes on the server it will still update though.

I debugged it a little bit and noticed that it was calling a function inside Selenium IDE, so I disabled that extension and Liveview works again.

Steps To Reproduce

1. Use the Dioxus CLI to generate an example Liveview project using Axum, cargo run it.
2. Open it in a Chrome window with Selenium IDE installed.
3. Try to click the increment / decrement buttons.
4. Sadness

Screenshots

If applicable, add screenshots to help explain your problem.

Environment:

• Dioxus version: [e.g. v0.17, master] #1750
• Rust version: [e.g. 1.43.0, nightly] v1.73.0
• OS info: [e.g. MacOS] MacOS
• App platform: [e.g. web, desktop] web / axum / liveview

Questionnaire

• [X] I would like to fix and I have a solution

Selenium IDE injects a JS function called handler into the window, which is the same name as the event handler function from Dioxus. Although I think this is probably Selenium IDE's fault, Dioxus should also try to scope the function it injects. I would have submitted a PR but I'm not exactly sure how people scope variables in JavaScript (is there an actual way to do this or do you just have to prepend the variable names with dioxus_ or something).

Edit: There's possibly a good way to do this...

https://caniuse.com/es6-module https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html

[ealmloff]

I would be fine with prepending the global variables dioxus injects into the window with dioxus_. We are forced to do something similar some places in rust macros. If you are open to doing some broader restructuring, using modules instead of global variables would be better long term solution

[jkelleyrtp]

This was because of poor scoping of certain variable names which has been since resolved!