From c6bb8a0c75b4307a73a3e36d97c7b5e69294cfe9 Mon Sep 17 00:00:00 2001
From: yyamashita <yyamashita@hetzner.yyamashita.com>
Date: Fri, 19 Jun 2026 15:55:54 +0900
Subject: Clear form textarea after successful post submission

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/routes/home.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

(limited to 'app')

diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 51d6f04..58004c9 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { Form, redirect, useNavigation } from "react-router";
 import type { Route } from "./+types/home";
 import { createPost, listPosts } from "~/lib/db.server";
@@ -27,6 +28,16 @@ export default function Home({ loaderData, actionData }: Route.ComponentProps) {
   const { posts } = loaderData;
   const navigation = useNavigation();
   const isSubmitting = navigation.state === "submitting";
+  const formRef = useRef<HTMLFormElement>(null);
+  const wasSubmitting = useRef(false);
+
+  useEffect(() => {
+    if (navigation.state === "submitting") wasSubmitting.current = true;
+    if (wasSubmitting.current && navigation.state === "idle" && !actionData?.error) {
+      formRef.current?.reset();
+      wasSubmitting.current = false;
+    }
+  }, [navigation.state, actionData?.error]);
 
   return (
     <div className="wrap">
@@ -35,7 +46,7 @@ export default function Home({ loaderData, actionData }: Route.ComponentProps) {
       </header>
 
       <div className="compose">
-        <Form method="post">
+        <Form method="post" ref={formRef}>
           <textarea
             name="content"
             placeholder="Markdown で投稿..."
-- 
cgit v1.2.3