Keep task form open after adding task for continuous input
- Modified InlineItemCreate component to maintain form visibility after successful task creation - Added keepFormOpen state to prevent form from closing on page revalidation - Users can now add multiple tasks without clicking 'Add task' button repeatedly - Form only closes when explicitly cancelled or escaped
This commit is contained in:
@@ -18,6 +18,7 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
|
||||
const [title, setTitle] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [keepFormOpen, setKeepFormOpen] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
@@ -40,14 +41,14 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
|
||||
// Clear form immediately for better UX
|
||||
const itemTitle = sanitizeString(title)
|
||||
setTitle('')
|
||||
setIsCreating(false)
|
||||
setKeepFormOpen(true) // Mark that we want to keep the form open
|
||||
|
||||
// Create item and refresh
|
||||
await createItem(listId, itemTitle)
|
||||
showToast('Task added successfully', 'success')
|
||||
|
||||
// Force immediate refresh
|
||||
router.refresh()
|
||||
// The revalidatePath in createItem will refresh the data
|
||||
// but we'll keep the form open due to keepFormOpen state
|
||||
} catch (error) {
|
||||
console.error('Error creating item:', error)
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to add task'
|
||||
@@ -63,6 +64,7 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
|
||||
const handleCancel = () => {
|
||||
setTitle('')
|
||||
setIsCreating(false)
|
||||
setKeepFormOpen(false) // Reset the keep form open state
|
||||
// Reset zoom on iOS Safari
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur()
|
||||
@@ -80,7 +82,7 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
if (!isCreating) {
|
||||
if (!isCreating && !keepFormOpen) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => setIsCreating(true)}
|
||||
|
||||
Reference in New Issue
Block a user