feat: improve PostForm focus management

- Refocus textarea after form submission

- Add test for Cmd/Ctrl+Enter submission shortcut

- Add tests to verify focus behavior

Author: letam

app/src/components/PostForm.tsx

@@ -1,11 +1,12 @@
 import type { ReactElement } from "react";
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 
 import createPost from "../api/createPost";
 
 export default function PostForm(): ReactElement {
   const queryClient = useQueryClient();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [form, setForm] = useState({
     head: "",
     body: "",
@@ -19,6 +20,7 @@ export default function PostForm(): ReactElement {
       .then(() => {
         setForm({ head: "", body: "" }); // Reset form
         queryClient.invalidateQueries({ queryKey: ["posts"] }); // Trigger posts refetch
+        textareaRef.current?.focus(); // Refocus textarea after submission
       })
       .catch((error) => {
         console.error(error); // eslint-disable-line no-console
@@ -40,6 +42,7 @@ export default function PostForm(): ReactElement {
               What's on your mind?
             </label>
             <textarea
+              ref={textareaRef}
               className="w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
               id="head"
               name="head"

app/src/components/__tests__/PostForm.test.tsx

@@ -201,4 +201,49 @@ describe("PostForm", () => {
     // Verify textarea is focused first
     expect(document.activeElement).toBe(textarea);
   });
+
+  it("refocuses textarea after successful form submission", async () => {
+    const mockCreatePost = vi.mocked(createPost);
+    mockCreatePost.mockResolvedValueOnce(mockPost);
+
+    renderPostForm();
+
+    const textarea = screen.getByRole('textbox', { name: /post content/i });
+    const submitButton = screen.getByRole('button', { name: /send/i });
+
+    // Type some text and submit
+    await userEvent.type(textarea, "Test post content");
+    await userEvent.click(submitButton);
+
+    // Verify textarea is refocused after submission
+    expect(document.activeElement).toBe(textarea);
+  });
+
+  it("submits form and refocuses textarea on Cmd/Ctrl+Enter", async () => {
+    const mockCreatePost = vi.mocked(createPost);
+    mockCreatePost.mockResolvedValueOnce(mockPost);
+
+    renderPostForm();
+
+    const textarea = screen.getByRole('textbox', { name: /post content/i });
+    await userEvent.type(textarea, "Test post content");
+
+    // Simulate Cmd+Enter (macOS) or Ctrl+Enter (Windows/Linux)
+    fireEvent.keyDown(textarea, {
+      key: "Enter",
+      code: "Enter",
+      metaKey: true, // Cmd key on macOS
+    });
+
+    // Verify form was submitted
+    await waitFor(() => {
+      expect(mockCreatePost).toHaveBeenCalledWith({
+        head: "Test post content",
+        body: "",
+      });
+    });
+
+    // Verify textarea is refocused
+    expect(document.activeElement).toBe(textarea);
+  });
 });