From bc1f655aab287668c724eac4f4a8a5fd2e274f16 Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@nym.sh>
Date: Sun, 21 Sep 2025 15:45:40 +0000
Subject: [PATCH] fix: auto focus new dir name input on create dir

Co-authored-by: Ona <no-reply@ona.com>
---
 .../directory-page/directory-content-table.tsx | 18 ++++++++++++------
 .../directory-page/directory-page.tsx          | 12 ++++++++++--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/directories/directory-page/directory-content-table.tsx b/packages/web/src/directories/directory-page/directory-content-table.tsx
index 53e8c40..247537d 100644
--- a/packages/web/src/directories/directory-page/directory-content-table.tsx
+++ b/packages/web/src/directories/directory-page/directory-content-table.tsx
@@ -353,11 +353,17 @@ function NewItemRow() {
 		}),
 	})
 
+	// Auto-focus the input when newItemKind changes to a truthy value
 	useEffect(() => {
-		if (newItemKind) {
-			setTimeout(() => {
-				inputRef.current?.focus()
-			}, 1)
+		if (newItemKind && inputRef.current) {
+			// Use requestAnimationFrame to ensure the component is fully rendered
+			// and the dropdown has completed its close cycle
+			requestAnimationFrame(() => {
+				if (inputRef.current) {
+					inputRef.current.focus()
+					inputRef.current.select() // Also select the default text for better UX
+				}
+			})
 		}
 	}, [newItemKind])
 
@@ -389,9 +395,9 @@ function NewItemRow() {
 			<TableCell className="p-0">
 				<div className="flex items-center gap-2 px-2 py-1 h-full">
 					{isPending ? (
-						<LoadingSpinner className="size-6" />
+						<LoadingSpinner className="size-4" />
 					) : (
-						<DirectoryIcon />
+						<DirectoryIcon className="size-4" />
 					)}
 					<form
 						className="w-full"
diff --git a/packages/web/src/directories/directory-page/directory-page.tsx b/packages/web/src/directories/directory-page/directory-page.tsx
index caee4cd..bcd9c44 100644
--- a/packages/web/src/directories/directory-page/directory-page.tsx
+++ b/packages/web/src/directories/directory-page/directory-page.tsx
@@ -6,7 +6,7 @@ import type {
 import { useMutation } from "@tanstack/react-query"
 import { Link } from "@tanstack/react-router"
 import { useMutation as useConvexMutation } from "convex/react"
-import { useAtom, useSetAtom } from "jotai"
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
 import {
 	ChevronDownIcon,
 	Loader2Icon,
@@ -195,11 +195,19 @@ function UploadFileButton() {
 
 function NewDirectoryItemDropdown() {
 	const setNewItemKind = useSetAtom(newItemKindAtom)
+	const newItemKind = useAtomValue(newItemKindAtom)
 
 	const addNewDirectory = () => {
 		setNewItemKind("directory")
 	}
 
+	const handleCloseAutoFocus = (event: Event) => {
+		// If we just created a new item, prevent the dropdown from restoring focus to the trigger
+		if (newItemKind) {
+			event.preventDefault()
+		}
+	}
+
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
@@ -209,7 +217,7 @@ function NewDirectoryItemDropdown() {
 					<ChevronDownIcon className="pl-1 size-4 shrink-0" />
 				</Button>
 			</DropdownMenuTrigger>
-			<DropdownMenuContent>
+			<DropdownMenuContent onCloseAutoFocus={handleCloseAutoFocus}>
 				<DropdownMenuItem>
 					<TextFileIcon />
 					Text file