[Bug] createCentsSlider destroys event listeners by using innerHTML

[varruunnn]

Description

In js/utils/synthutils.js, the function createCentsSlider creates the UI for the cents adjustment slider. To do this, it temporarily clears the current widget body.

However, the method used to save and restore the widget's state is flawed:

this.previousContent = widgetBody.innerHTML;
this.widgetWindow.getWidgetBody().innerHTML = this.previousContent;

Using innerHTML to save and restore DOM elements strips all event listeners attached to those elements. When the Cents Slider is closed and the previous content is restored, any buttons or interactive elements in the original widget become "dead" (unresponsive) because their JavaScript bindings are lost.

Expected Behavior

When the Cents Slider is closed (removeCentsSlider is called), the previous widget content should reappear with all its interactivity and event listeners intact. The user should be able to continue using the original widget without needing to reload it.

Environment:

Operating System: All (Windows, macOS, Linux)
Browser: All (Chrome, Firefox, Safari) - behavior of innerHTML stripping listeners is standard across browsers.
Version of Software/Project: MusicBlocks v3.4.1 (Current Master)

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.