fix: improve keyboard event handling in timeline component

1 files changed, 22 insertions, 1 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 01f84d71..f2d24ffc 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(() => {