Mar 13, 2025 · Mar 13, 2025 · Mar 13, 2025
diff --git a/site/src/components/SearchField/SearchField.stories.tsx b/site/src/components/SearchField/SearchField.stories.tsx

 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
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import visuallyHidden from "@mui/utils/visuallyHidden";
 importtype { 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
 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
 >
 <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
Expand Up		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
		importtype { 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
Expand All		@@ -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">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Expand Down