fix: apply autofocus to workspace button search (#16905)

mtojek · web-flow · commit 30179aeaac37 · 2025-03-13T13:31:18.000Z
Fixes: #14816
diff --git 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: {
+		autoFocus: 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
@@ -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;
+	autoFocus?: boolean;
 };
 
 export const SearchField: FC<SearchFieldProps> = ({
 	value = "",
 	onChange,
+	autoFocus = false,
 	InputProps,
 	...textFieldProps
 }) => {
 	const theme = useTheme();
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	if (autoFocus) {
+		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
@@ -69,6 +69,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 			>
 				<MenuSearch
 					value={searchTerm}
+					autoFocus={true}
 					onChange={setSearchTerm}
 					placeholder="Type/select a workspace template"
 					aria-label="Template select for workspace"

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({`
`69`	`69`	`>`
`70`	`70`	`<MenuSearch`
`71`	`71`	`value={searchTerm}`
	`72`	`+ autoFocus={true}`
`72`	`73`	`onChange={setSearchTerm}`
`73`	`74`	`placeholder="Type/select a workspace template"`
`74`	`75`	`aria-label="Template select for workspace"`