From b6aa8e10d69ccf547f3cb0051d10fda014a2d01e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 9 Jul 2025 23:25:08 +0200
Subject: [PATCH] fix: improve keyboard event handling in timeline component

---
 apps/web/src/components/editor/timeline.tsx | 23 ++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 01f84d7..f2d24ff 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -139,6 +139,22 @@ export function Timeline() {
   // Keyboard event for deleting selected elements
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't trigger when typing in input fields or textareas
+      if (
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement
+      ) {
+        return;
+      }
+
+      // Only trigger when timeline is focused or mouse is over timeline
+      if (
+        !isInTimeline &&
+        !timelineRef.current?.contains(document.activeElement)
+      ) {
+        return;
+      }
+
       if (
         (e.key === "Delete" || e.key === "Backspace") &&
         selectedElements.length > 0
@@ -151,7 +167,12 @@ export function Timeline() {
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [selectedElements, removeElementFromTrack, clearSelectedElements]);
+  }, [
+    selectedElements,
+    removeElementFromTrack,
+    clearSelectedElements,
+    isInTimeline,
+  ]);
 
   // Keyboard event for undo (Cmd+Z)
   useEffect(() => {