diff --git a/components/InlineItemCreate.tsx b/components/InlineItemCreate.tsx index 11cb6c8..82d5ae0 100644 --- a/components/InlineItemCreate.tsx +++ b/components/InlineItemCreate.tsx @@ -1,6 +1,6 @@ 'use client' -import { useState } from 'react' +import { useState, useRef, useEffect } from 'react' import { useRouter } from 'next/navigation' import { createItem } from '@/lib/actions' import { Plus } from 'lucide-react' @@ -19,6 +19,19 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [error, setError] = useState('') const [keepFormOpen, setKeepFormOpen] = useState(false) + const inputRef = useRef(null) + + // Focus input when form becomes visible + useEffect(() => { + if ((isCreating || keepFormOpen) && inputRef.current) { + // Small delay to ensure the input is rendered + setTimeout(() => { + if (inputRef.current) { + inputRef.current.focus() + } + }, 50) + } + }, [isCreating, keepFormOpen]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() @@ -49,6 +62,13 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) { // The revalidatePath in createItem will refresh the data // but we'll keep the form open due to keepFormOpen state + + // Refocus the input after a short delay to keep keyboard open + setTimeout(() => { + if (inputRef.current) { + inputRef.current.focus() + } + }, 100) } catch (error) { console.error('Error creating item:', error) const errorMessage = error instanceof Error ? error.message : 'Failed to add task' @@ -77,9 +97,13 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) { } } - const handleBlur = () => { - // Force viewport reset on iOS Safari - window.scrollTo(0, 0) + const handleBlur = (e: React.FocusEvent) => { + // Only handle blur if we're not keeping the form open + // This prevents the keyboard from closing when we want it to stay open + if (!keepFormOpen) { + // Force viewport reset on iOS Safari + window.scrollTo(0, 0) + } } if (!isCreating && !keepFormOpen) { @@ -98,6 +122,7 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
{