From e367182dfa3c7c2207e652466aad1de1251f9a18 Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Sun, 26 Jan 2025 17:49:32 +0000
Subject: [PATCH] feat: autofocus input when adding

---
 app/home/application-list.tsx | 22 +++++++++++++++++++---
 app/routes/home.tsx           |  8 +++++++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/home/application-list.tsx b/app/home/application-list.tsx
index 13592b3..cf4f835 100644
--- a/app/home/application-list.tsx
+++ b/app/home/application-list.tsx
@@ -1,4 +1,11 @@
-import { createContext, memo, useContext } from "react"
+import {
+	type Ref,
+	createContext,
+	memo,
+	useContext,
+	useEffect,
+	useRef,
+} from "react"
 import { create } from "zustand"
 import { useShallow } from "zustand/react/shallow"
 import { Button } from "~/components/button"
@@ -84,16 +91,24 @@ const StageItem = memo(({ step }: { step: string }) => {
 
 function NewStageInput() {
 	const isAddingStage = useListItemStore((state) => state.isAddingStage)
+	const inputRef = useRef<HTMLInputElement | null>(null)
+
+	useEffect(() => {
+		if (isAddingStage) {
+			inputRef.current?.focus()
+		}
+	}, [isAddingStage])
+
 	if (isAddingStage) {
 		return (
 			<li className="px-1">
-				<ActualStageInput />
+				<ActualStageInput ref={inputRef} />
 			</li>
 		)
 	}
 	return null
 }
-function ActualStageInput() {
+function ActualStageInput({ ref }: { ref: Ref<HTMLInputElement> }) {
 	const entry = useContext(EntryContext)
 	const newStageValue = useListItemStore((state) => state.newStageValue)
 	const setNewStageValue = useListItemStore((state) => state.setNewStageValue)
@@ -101,6 +116,7 @@ function ActualStageInput() {
 
 	return (
 		<input
+			ref={ref}
 			value={newStageValue}
 			onChange={(event) => {
 				setNewStageValue(event.currentTarget.value)
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 12d26eb..debc662 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import Chart from "react-google-charts"
 import { Button } from "~/components/button"
 import { ApplicationList } from "~/home/application-list"
@@ -90,6 +90,12 @@ function AddApplicationForm() {
 	const hasEntry = useStore((state) => state.hasEntry)
 	const inputRef = useRef<HTMLInputElement | null>(null)
 
+	useEffect(() => {
+		if (isAddingEntry) {
+			inputRef.current?.focus()
+		}
+	}, [isAddingEntry])
+
 	function onAddButtonClick() {
 		if (!isAddingEntry) {
 			setIsAddingEntry(true)