diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx index e9bad2e1..ecd2291d 100644 --- a/apps/web/src/components/editor-header.tsx +++ b/apps/web/src/components/editor-header.tsx @@ -8,7 +8,7 @@ import { HeaderBase } from "./header-base"; import { formatTimeCode } from "@/lib/time"; import { useProjectStore } from "@/stores/project-store"; import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help"; -import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; export function EditorHeader() { const { getTotalDuration } = useTimelineStore(); @@ -24,17 +24,21 @@ export function EditorHeader() { console.log("Export project"); }; - // When user clicks the project name, enter edit mode and select all text + // When user clicks the project name, enter edit mode const handleNameClick = () => { if (!activeProject) return; setNewName(activeProject.name); setIsEditing(true); - setTimeout(() => { - inputRef.current?.focus(); - inputRef.current?.select(); - }, 0); }; + // Focus/select input when entering edit mode + useEffect(() => { + if (isEditing && inputRef.current) { + inputRef.current.focus(); + inputRef.current.select(); + } + }, [isEditing]); + // Save the new name if changed, exit edit mode const handleNameSave = async () => { if (activeProject && newName.trim() && newName !== activeProject.name) { @@ -74,7 +78,10 @@ export function EditorHeader() { e.key === 'Enter' && handleNameClick()} > {activeProject?.name}