From 43bfdcdb934d47a366e4d91cb5825022f16bdcb9 Mon Sep 17 00:00:00 2001
From: Nathan Clark <nathan@brandnewbox.com>
Date: Tue, 17 Mar 2026 12:46:52 -0500
Subject: [PATCH] =?UTF-8?q?stopPropagation=20is=20a=20method=20on=20Event.?=
 =?UTF-8?q?prototype=20that=20uses=20this=20internally.=20When=20destructu?=
 =?UTF-8?q?red=20({=20stopPropagation=20}),=20it=20loses=20its=20binding?=
 =?UTF-8?q?=20to=20the=20event=20object,=20so=20calling=20stopPropagation(?=
 =?UTF-8?q?)=20throws=20a=20TypeError=20=E2=80=94=20which=20silently=20pre?=
 =?UTF-8?q?vents=20toggleSavedSound=20and=20addSoundToTimeline=20from=20ev?=
 =?UTF-8?q?er=20executing.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Using e.stopPropagation() keeps the method bound to the event. Both buttons should work now.
---
 .../editor/panels/assets/views/sounds.tsx          | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/editor/panels/assets/views/sounds.tsx b/apps/web/src/components/editor/panels/assets/views/sounds.tsx
index b1c57c3d..14781ac3 100644
--- a/apps/web/src/components/editor/panels/assets/views/sounds.tsx
+++ b/apps/web/src/components/editor/panels/assets/views/sounds.tsx
@@ -504,17 +504,15 @@ function AudioItem({ sound, isPlaying, onPlay }: AudioItemProps) {
 		onPlay({ sound });
 	};
 
-	const handleSaveClick = ({
-		stopPropagation,
-	}: React.MouseEvent<HTMLButtonElement>) => {
-		stopPropagation();
+	const handleSaveClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.stopPropagation();
 		toggleSavedSound({ soundEffect: sound });
 	};
 
-	const handleAddToTimeline = async ({
-		stopPropagation,
-	}: React.MouseEvent<HTMLButtonElement>) => {
-		stopPropagation();
+	const handleAddToTimeline = async (
+		e: React.MouseEvent<HTMLButtonElement>,
+	) => {
+		e.stopPropagation();
 		await addSoundToTimeline({ sound });
 	};