From ba8e2a4b5c286da609c9eee809b50447a8fe37de Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Thu, 13 Mar 2025 13:40:11 +0100
Subject: [PATCH 1/2] fix: autofocus workspace button search

---
 .../components/SearchField/SearchField.stories.tsx   |  6 ++++++
 site/src/components/SearchField/SearchField.tsx      | 12 +++++++++++-
 site/src/pages/WorkspacesPage/WorkspacesButton.tsx   |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/site/src/components/SearchField/SearchField.stories.tsx b/site/src/components/SearchField/SearchField.stories.tsx
index aa7ad9ba739f1..e4536a8953289 100644
--- a/site/src/components/SearchField/SearchField.stories.tsx
+++ b/site/src/components/SearchField/SearchField.stories.tsx
@@ -20,6 +20,12 @@ type Story = StoryObj<typeof SearchField>;
 
 export const Empty: Story = {};
 
+export const Focused: Story = {
+	args: {
+		autoFocused: true,
+	},
+};
+
 export const DefaultValue: Story = {
 	args: {
 		value: "owner:me",
diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
index cfe5d0637b37e..df8cd1c8168cb 100644
--- a/site/src/components/SearchField/SearchField.tsx
+++ b/site/src/components/SearchField/SearchField.tsx
@@ -6,19 +6,28 @@ import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import visuallyHidden from "@mui/utils/visuallyHidden";
-import type { FC } from "react";
+import { type FC, useEffect, useRef } from "react";
 
 export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
 	onChange: (query: string) => void;
+	autoFocused?: boolean;
 };
 
 export const SearchField: FC<SearchFieldProps> = ({
 	value = "",
 	onChange,
+	autoFocused = false,
 	InputProps,
 	...textFieldProps
 }) => {
 	const theme = useTheme();
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	if (autoFocused) {
+		useEffect(() => {
+			inputRef.current?.focus();
+		});
+	}
 	return (
 		<TextField
 			// Specifying `minWidth` so that the text box can't shrink so much
@@ -27,6 +36,7 @@ export const SearchField: FC<SearchFieldProps> = ({
 			size="small"
 			value={value}
 			onChange={(e) => onChange(e.target.value)}
+			inputRef={inputRef}
 			InputProps={{
 				startAdornment: (
 					<InputAdornment position="start">
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 973c4d9b13e05..686eafbc82434 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -69,6 +69,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 			>
 				<MenuSearch
 					value={searchTerm}
+					autoFocused={true}
 					onChange={setSearchTerm}
 					placeholder="Type/select a workspace template"
 					aria-label="Template select for workspace"

From 51d27ccb1b6d02a4e875f0b378db01a0e32f0ee6 Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Thu, 13 Mar 2025 14:22:12 +0100
Subject: [PATCH 2/2] rename

---
 site/src/components/SearchField/SearchField.stories.tsx | 2 +-
 site/src/components/SearchField/SearchField.tsx         | 6 +++---
 site/src/pages/WorkspacesPage/WorkspacesButton.tsx      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/components/SearchField/SearchField.stories.tsx b/site/src/components/SearchField/SearchField.stories.tsx
index e4536a8953289..79e76d4d6ad82 100644
--- a/site/src/components/SearchField/SearchField.stories.tsx
+++ b/site/src/components/SearchField/SearchField.stories.tsx
@@ -22,7 +22,7 @@ export const Empty: Story = {};
 
 export const Focused: Story = {
 	args: {
-		autoFocused: true,
+		autoFocus: true,
 	},
 };
 
diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
index df8cd1c8168cb..2ce66d9b3ca78 100644
--- a/site/src/components/SearchField/SearchField.tsx
+++ b/site/src/components/SearchField/SearchField.tsx
@@ -10,20 +10,20 @@ import { type FC, useEffect, useRef } from "react";
 
 export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
 	onChange: (query: string) => void;
-	autoFocused?: boolean;
+	autoFocus?: boolean;
 };
 
 export const SearchField: FC<SearchFieldProps> = ({
 	value = "",
 	onChange,
-	autoFocused = false,
+	autoFocus = false,
 	InputProps,
 	...textFieldProps
 }) => {
 	const theme = useTheme();
 	const inputRef = useRef<HTMLInputElement>(null);
 
-	if (autoFocused) {
+	if (autoFocus) {
 		useEffect(() => {
 			inputRef.current?.focus();
 		});
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 686eafbc82434..c5a2527d7a75d 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -69,7 +69,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 			>
 				<MenuSearch
 					value={searchTerm}
-					autoFocused={true}
+					autoFocus={true}
 					onChange={setSearchTerm}
 					placeholder="Type/select a workspace template"
 					aria-label="Template select for workspace"