From 3868efceadf9303e3d4ee664808106fecd0e89a5 Mon Sep 17 00:00:00 2001
From: bbassie <17990055+bbassie@users.noreply.github.com>
Date: Wed, 11 Nov 2026 09:38:11 +0000
Subject: [PATCH] Focus the mod search inputs when they open

The "Add mods" card on the mod pack view mounts when shown, so autoFocus
is enough there. The Search Mod Portal modal stays mounted after the
first open, so it focuses the name input from afterOpenChange instead.

Fixes #1194

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/web_ui/src/components/ModPackViewPage.tsx | 1 +
 packages/web_ui/src/components/ModsPage.tsx        | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web_ui/src/components/ModPackViewPage.tsx b/packages/web_ui/src/components/ModPackViewPage.tsx
index 3bd8558f..99cad1d0 100644
--- a/packages/web_ui/src/components/ModPackViewPage.tsx
+++ b/packages/web_ui/src/components/ModPackViewPage.tsx
@@ -182,6 +182,7 @@ function SearchModsTable(props: SearchModsTableProps) {
 
 	return <>
 		<Input
+			autoFocus
 			placeholder="Search Mods"
 			style={{ marginBottom: 8 }}
 			onChange={(event) => {
diff --git a/packages/web_ui/src/components/ModsPage.tsx b/packages/web_ui/src/components/ModsPage.tsx
index 9f22a1a1..731a90a0 100644
--- a/packages/web_ui/src/components/ModsPage.tsx
+++ b/packages/web_ui/src/components/ModsPage.tsx
@@ -1,7 +1,8 @@
-import React, { Fragment, useState, useContext, useEffect, useMemo } from "react";
+import React, { Fragment, useState, useContext, useEffect, useMemo, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import {
-	Button, Form, Input, Modal, Popconfirm, Space, Table, Typography, Upload, Alert, Select, Tooltip, notification,
+	Button, Form, Input, InputRef, Modal, Popconfirm, Space, Table, Typography, Upload, Alert, Select, Tooltip,
+	notification,
 } from "antd";
 import {
 	ImportOutlined, PlusOutlined, SearchOutlined, DownloadOutlined,
@@ -147,6 +148,7 @@ function SearchModsButton() {
 	const account = useAccount();
 	const [open, setOpen] = useState(false);
 	const [form] = Form.useForm();
+	const nameInputRef = useRef<InputRef>(null);
 	const [searchText, setSearchText] = useState("");
 	const [factorioVersion, setFactorioVersion] = useState<lib.MajorMinorVersion>("2.0");
 
@@ -333,6 +335,7 @@ function SearchModsButton() {
 			title="Search Mod Portal"
 			open={open}
 			onCancel={() => { setOpen(false); }}
+			afterOpenChange={visible => { if (visible) { nameInputRef.current?.focus(); } }}
 			width={1000}
 			footer={[
 				<Button key="close" onClick={() => { setOpen(false); }}>
@@ -349,7 +352,7 @@ function SearchModsButton() {
 				initialValues={{ factorioVersion: factorioVersion, name: searchText }}
 			>
 				<Form.Item name="name" label="Filter by Name or Title">
-					<Input placeholder="Start typing to filter..." />
+					<Input ref={nameInputRef} placeholder="Start typing to filter..." />
 				</Form.Item>
 				<Form.Item
 					name="factorioVersion"