fix: ensure clicking context menu item doesn't move timeline playhead

2 files changed, 13 insertions, 6 deletions

diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 0368e452..bcaece89 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -746,11 +746,14 @@ export function Timeline() {
                         </ContextMenuTrigger>
                         <ContextMenuContent className="z-[200]">
                           <ContextMenuItem
-                            onClick={() => toggleTrackMute(track.id)}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              toggleTrackMute(track.id);
+                            }}
                           >
                             {track.muted ? "Unmute Track" : "Mute Track"}
                           </ContextMenuItem>
-                          <ContextMenuItem>
+                          <ContextMenuItem onClick={(e) => e.stopPropagation()}>
                             Track settings (soon)
                           </ContextMenuItem>
                         </ContextMenuContent>
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index fc40bb54..c66e9fcb 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -102,7 +102,8 @@ export function TimelineElement({
   // Element should always be positioned at startTime - trimStart only affects content, not position
   const elementLeft = elementStartTime * 50 * zoomLevel;
 
-  const handleElementSplitContext = () => {
+  const handleElementSplitContext = (e: React.MouseEvent) => {
+    e.stopPropagation();
     const effectiveStart = element.startTime;
     const effectiveEnd =
       element.startTime +
@@ -118,7 +119,8 @@ export function TimelineElement({
     }
   };
 
-  const handleElementDuplicateContext = () => {
+  const handleElementDuplicateContext = (e: React.MouseEvent) => {
+    e.stopPropagation();
     const { id, ...elementWithoutId } = element;
     addElementToTrack(track.id, {
       ...elementWithoutId,
@@ -130,7 +132,8 @@ export function TimelineElement({
     });
   };
 
-  const handleElementDeleteContext = () => {
+  const handleElementDeleteContext = (e: React.MouseEvent) => {
+    e.stopPropagation();
     if (rippleEditingEnabled) {
       removeElementFromTrackWithRipple(track.id, element.id);
     } else {
@@ -138,7 +141,8 @@ export function TimelineElement({
     }
   };
 
-  const handleReplaceClip = () => {
+  const handleReplaceClip = (e: React.MouseEvent) => {
+    e.stopPropagation();
     if (element.type !== "media") {
       toast.error("Replace is only available for media clips");
       return;