Merge pull request #5754 from DhyaniKavya/fix/stop-icon-listener-leak

fix: Prevent stop icon listener accumulation in play debounce logic

Author: omsuneri

js/__tests__/toolbar.test.js

@@ -240,7 +240,8 @@ describe("Toolbar Class", () => {
             },
             stop: {
                 style: { color: "" },
-                addEventListener: jest.fn()
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn()
             },
             record: {
                 className: ""
@@ -267,6 +268,10 @@ describe("Toolbar Class", () => {
         expect(global.saveButtonAdvanced.disabled).toBe(true);
         expect(global.saveButton.className).toBe("grey-text inactiveLink");
         expect(elements.record.className).toBe("grey-text inactiveLink");
+        expect(elements.stop.removeEventListener).toHaveBeenCalledWith(
+            "click",
+            expect.any(Function)
+        );
         expect(elements.stop.addEventListener).toHaveBeenCalledWith("click", expect.any(Function));
 
         const stopClickHandler = elements.stop.addEventListener.mock.calls[0][1];

js/toolbar.js

@@ -406,6 +406,14 @@ class Toolbar {
             }
         }
 
+        // Named handler to prevent memory leak from duplicate listeners
+        const stopClickHandler = () => {
+            clearTimeout(play_button_debounce_timeout);
+            isPlayIconRunning = true;
+            this.activity.hideMsgs();
+            handleClick();
+        };
+
         var tempClick = (playIcon.onclick = () => {
             const hideMsgs = () => {
                 this.activity.hideMsgs();
@@ -424,12 +432,9 @@ class Toolbar {
                 handleClick();
             }, 2000);
 
-            stopIcon.addEventListener("click", function () {
-                clearTimeout(play_button_debounce_timeout);
-                isPlayIconRunning = true;
-                hideMsgs();
-                handleClick();
-            });
+            // Remove existing listener before adding to prevent accumulation
+            stopIcon.removeEventListener("click", stopClickHandler);
+            stopIcon.addEventListener("click", stopClickHandler);
         });
     }