feat: refactor <Filter /> with alignment to design (#21780)

This pull-request refactors filter-related dropdown and input components
from MUI to our Tailwind-based design system. This is more inline with
the Figma design, controversially we are changing the button group for
canned filters and input to two seperate components.

- **InputGroup**: Complete rewrite to a compound component pattern
(`InputGroup`, `InputGroupAddon`, `InputGroupInput`, `InputGroupButton`)
using Tailwind and CVA, replacing the old CSS-in-JS approach
- **SearchField**: Migrated from MUI TextField to use the new InputGroup
components, with a simplified API and proper ref forwarding
- **Filter/PresetMenu**: Replaced MUI Menu with our DropdownMenu
component, and updated icon to `SlidersHorizontal`

### Changes

| Component | Before | After |
|-----------|--------|-------|
| InputGroup | CSS-in-JS with MUI margin hacks | Compound component with
Tailwind group states |
| SearchField | MUI TextField + InputAdornment | InputGroup +
InputGroupAddon composition |
| PresetMenu | MUI Menu/MenuItem | DropdownMenu/DropdownMenuItem |
| MenuSearch | Complex CSS overrides | Single Tailwind class |

<img
src="https://github.com/user-attachments/assets/5b819027-2dca-4dcc-b6d6-7096fa3775c0"
/>

site/src/components/Filter/Filter.tsx

@@ -1,7 +1,4 @@
 import { useTheme } from "@emotion/react";
-import Divider from "@mui/material/Divider";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
 import Skeleton, { type SkeletonProps } from "@mui/material/Skeleton";
 import type { Breakpoint } from "@mui/system/createTheme";
 import {
@@ -10,10 +7,16 @@ import {
 	isApiValidationError,
 } from "api/errors";
 import { Button } from "components/Button/Button";
-import { InputGroup } from "components/InputGroup/InputGroup";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "components/DropdownMenu/DropdownMenu";
 import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
-import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, SlidersHorizontal } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
 
 type PresetFilter = {
@@ -219,39 +222,41 @@ export const Filter: FC<FilterProps> = ({
 				</>
 			) : (
 				<>
-					<InputGroup css={{ width: "100%" }}>
-						<PresetMenu
-							onSelect={(query) => filter.update(query)}
-							presets={presets}
-							learnMoreLink={learnMoreLink}
-							learnMoreLabel2={learnMoreLabel2}
-							learnMoreLink2={learnMoreLink2}
-						/>
+					<PresetMenu
+						onSelect={(query) => filter.update(query)}
+						presets={presets}
+						learnMoreLink={learnMoreLink}
+						learnMoreLabel2={learnMoreLabel2}
+						learnMoreLink2={learnMoreLink2}
+					/>
+					<div className="flex flex-col gap-2 w-full">
 						<SearchField
-							css={{ flex: 1 }}
-							error={shouldDisplayError}
-							helperText={
-								shouldDisplayError
-									? getValidationErrorMessage(error)
-									: undefined
-							}
-							placeholder="Search..."
+							ref={textboxInputRef}
+							className="w-full"
 							value={queryCopy}
+							aria-label="Filter"
+							aria-invalid={shouldDisplayError}
 							onChange={(query) => {
 								setQueryCopy(query);
 								filter.debounceUpdate(query);
 							}}
-							InputProps={{
-								ref: textboxInputRef,
-								"aria-label": "Filter",
-								onBlur: () => {
-									if (queryCopy !== filter.query) {
-										setQueryCopy(filter.query);
-									}
-								},
+							onClear={() => {
+								setQueryCopy("");
+								filter.cancelDebounce();
+								filter.update("");
 							}}
+							onBlur={() => {
+								if (queryCopy === filter.query) return;
+								setQueryCopy(filter.query);
+							}}
+							placeholder="Search..."
 						/>
-					</InputGroup>
+						{hasError(error) && (
+							<span className="text-content-destructive text-sm">
+								{getValidationErrorMessage(error)}
+							</span>
+						)}
+					</div>
 					{options}
 				</>
 			)}
@@ -274,80 +279,41 @@ const PresetMenu: FC<PresetMenuProps> = ({
 	learnMoreLink2,
 	onSelect,
 }) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const anchorRef = useRef<HTMLButtonElement>(null);
-	const theme = useTheme();
-
 	return (
-		<>
-			<Button
-				onClick={() => setIsOpen(true)}
-				ref={anchorRef}
-				variant="outline"
-				className="h-9"
-			>
-				Filters
-				<ChevronDownIcon />
-			</Button>
-			<Menu
-				id="filter-menu"
-				anchorEl={anchorRef.current}
-				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				anchorOrigin={{
-					vertical: "bottom",
-					horizontal: "left",
-				}}
-				transformOrigin={{
-					vertical: "top",
-					horizontal: "left",
-				}}
-				css={{ "& .MuiMenu-paper": { paddingTop: 8, paddingBottom: 8 } }}
-			>
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline">
+					<SlidersHorizontal className="size-icon-xs" />
+					Filters
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent side="bottom" align="start">
 				{presets.map((presetFilter) => (
-					<MenuItem
-						css={{ fontSize: 14 }}
+					<DropdownMenuItem
+						onSelect={() => onSelect(presetFilter.query)}
 						key={presetFilter.name}
-						onClick={() => {
-							onSelect(presetFilter.query);
-							setIsOpen(false);
-						}}
 					>
 						{presetFilter.name}
-					</MenuItem>
+					</DropdownMenuItem>
 				))}
+				{(learnMoreLink || learnMoreLink2) && <DropdownMenuSeparator />}
 				{learnMoreLink && (
-					<Divider css={{ borderColor: theme.palette.divider }} />
-				)}
-				{learnMoreLink && (
-					<MenuItem
-						component="a"
-						href={learnMoreLink}
-						target="_blank"
-						css={{ fontSize: 13, fontWeight: 500 }}
-						onClick={() => {
-							setIsOpen(false);
-						}}
-					>
-						<ExternalLinkIcon className="size-icon-xs" />
-						View advanced filtering
-					</MenuItem>
+					<DropdownMenuItem asChild>
+						<a href={learnMoreLink} target="_blank">
+							<ExternalLinkIcon className="size-icon-xs" />
+							View advanced filtering
+						</a>
+					</DropdownMenuItem>
 				)}
 				{learnMoreLink2 && learnMoreLabel2 && (
-					<MenuItem
-						component="a"
-						href={learnMoreLink2}
-						target="_blank"
-						css={{ fontSize: 13, fontWeight: 500 }}
-						onClick={() => {
-							setIsOpen(false);
-						}}
-					>
-						<ExternalLinkIcon className="size-icon-xs" />
-						{learnMoreLabel2}
-					</MenuItem>
+					<DropdownMenuItem asChild>
+						<a href={learnMoreLink2} target="_blank">
+							<ExternalLinkIcon className="size-icon-xs" />
+							{learnMoreLabel2}
+						</a>
+					</DropdownMenuItem>
 				)}
-			</Menu>
-		</>
+			</DropdownMenuContent>
+		</DropdownMenu>
 	);
 };

site/src/components/Filter/SelectFilter.stories.tsx

@@ -130,7 +130,7 @@ export const SearchingOption: Story = {
 						value={search}
 						onChange={setSearch}
 						placeholder="Search options..."
-						inputProps={{ "aria-label": "Search options" }}
+						aria-label="Search options"
 					/>
 				}
 			/>

site/src/components/Filter/SelectFilter.tsx

@@ -1,4 +1,5 @@
 import { Loader } from "components/Loader/Loader";
+import type { SearchFieldProps } from "components/SearchField/SearchField";
 import {
 	SelectMenu,
 	SelectMenuButton,
@@ -116,4 +117,18 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 	);
 };
 
-export const SelectFilterSearch = SelectMenuSearch;
+export const SelectFilterSearch = ({
+	className,
+	...props
+}: SearchFieldProps) => {
+	return (
+		<SelectMenuSearch
+			className={cn(
+				className,
+				"rounded-none border-x-0 border-t-0",
+				"has-[input:focus-visible]:ring-0",
+			)}
+			{...props}
+		/>
+	);
+};

site/src/components/Filter/UserFilter.tsx

@@ -99,10 +99,10 @@ export const UserMenu: FC<UserMenuProps> = ({ menu, width, placeholder }) => {
 			selectedOption={menu.selectedOption ?? undefined}
 			selectFilterSearch={
 				<SelectFilterSearch
-					inputProps={{ "aria-label": "Search user" }}
 					placeholder="Search user..."
 					value={menu.query}
 					onChange={menu.setQuery}
+					aria-label="Search user"
 				/>
 			}
 			width={width}

site/src/components/Input/Input.tsx

@@ -18,7 +18,8 @@ export const Input = forwardRef<
 				file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-content-primary
 				placeholder:text-content-secondary
 				focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
-				disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-inherit`,
+				disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-inherit
+				`,
 				className,
 			)}
 			ref={ref}

site/src/components/InputGroup/InputGroup.stories.tsx

@@ -1,7 +1,6 @@
-import TextField from "@mui/material/TextField";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
-import { InputGroup } from "./InputGroup";
+import { SearchIcon } from "lucide-react";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./InputGroup";
 
 const meta: Meta<typeof InputGroup> = {
 	title: "components/InputGroup",
@@ -11,70 +10,87 @@ const meta: Meta<typeof InputGroup> = {
 export default meta;
 type Story = StoryObj<typeof InputGroup>;
 
-export const Default: Story = {
+export const WithIconStart: Story = {
 	args: {
 		children: (
 			<>
-				<Button variant="outline" className="h-9">
-					Menu
-				</Button>
-				<TextField size="small" placeholder="Search..." />
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+				<InputGroupInput placeholder="Search..." />
 			</>
 		),
 	},
 };
 
-export const FocusedTextField: Story = {
+export const WithIconEnd: Story = {
 	args: {
 		children: (
 			<>
-				<Button>Menu</Button>
-				<TextField autoFocus size="small" placeholder="Search..." />
+				<InputGroupInput placeholder="Search..." />
+				<InputGroupAddon align="inline-end">
+					<SearchIcon />
+				</InputGroupAddon>
 			</>
 		),
 	},
 };
 
-export const ErroredTextField: Story = {
+export const WithTextStart: Story = {
 	args: {
 		children: (
 			<>
-				<Button>Menu</Button>
-				<TextField
-					error
-					size="small"
-					placeholder="Search..."
-					helperText="Some error message..."
-				/>
+				<InputGroupAddon>https://</InputGroupAddon>
+				<InputGroupInput placeholder="example.com" />
 			</>
 		),
 	},
 };
 
-export const FocusedErroredTextField: Story = {
+export const WithTextEnd: Story = {
 	args: {
 		children: (
 			<>
-				<Button>Menu</Button>
-				<TextField
-					autoFocus
-					error
-					size="small"
-					placeholder="Search..."
-					helperText="Some error message..."
-				/>
+				<InputGroupInput placeholder="username" />
+				<InputGroupAddon align="inline-end">@coder.com</InputGroupAddon>
 			</>
 		),
 	},
 };
 
-export const WithThreeElements: Story = {
+export const WithBothAddons: Story = {
 	args: {
 		children: (
 			<>
-				<Button>Menu</Button>
-				<TextField size="small" placeholder="Search..." />
-				<Button>Submit</Button>
+				<InputGroupAddon>$</InputGroupAddon>
+				<InputGroupInput placeholder="0.00" type="number" />
+				<InputGroupAddon align="inline-end">USD</InputGroupAddon>
+			</>
+		),
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		children: (
+			<>
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+				<InputGroupInput placeholder="Disabled..." disabled />
+			</>
+		),
+	},
+};
+
+export const Invalid: Story = {
+	args: {
+		children: (
+			<>
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+				<InputGroupInput placeholder="Invalid..." aria-invalid="true" />
 			</>
 		),
 	},

site/src/components/InputGroup/InputGroup.tsx

@@ -1,52 +1,106 @@
-import type { FC, HTMLProps } from "react";
-export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
+import { cva, type VariantProps } from "class-variance-authority";
+import { Button, type ButtonProps } from "components/Button/Button";
+import { Input } from "components/Input/Input";
+import { type FC, forwardRef } from "react";
+import { cn } from "utils/cn";
+
+const InputGroup: FC<React.ComponentProps<"div">> = ({
+	className,
+	...props
+}) => {
 	return (
 		<div
+			role="group"
+			className={cn(
+				// Base styles
+				"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-md border border-solid border-border bg-transparent transition-colors outline-none",
+				// Focus-visible ring when input inside is focused
+				"has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-content-link",
+				// Invalid state
+				"has-[input[aria-invalid=true]]:border-border-destructive",
+				// Disabled state
+				"has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed",
+				className,
+			)}
 			{...props}
-			css={{
-				display: "flex",
-				alignItems: "flex-start",
-
-				// Overlap borders to avoid displaying double borders between elements.
-				"& > *:not(:last-child)": {
-					marginRight: -1,
-				},
-
-				// Ensure the border of the hovered element is visible when borders
-				// overlap.
-				"& > *:hover": {
-					zIndex: 1,
-				},
-
-				// Display border elements when focused or in an error state, both of
-				// which take priority over hover.
-				"& .Mui-focused, & .Mui-error": {
-					zIndex: 2,
-				},
-
-				"& > *:first-of-type": {
-					borderTopRightRadius: 0,
-					borderBottomRightRadius: 0,
-				},
-
-				"& > *:last-child": {
-					borderTopLeftRadius: 0,
-					borderBottomLeftRadius: 0,
-
-					"&.MuiFormControl-root .MuiInputBase-root": {
-						borderTopLeftRadius: 0,
-						borderBottomLeftRadius: 0,
-					},
-				},
-
-				"& > *:not(:first-of-type):not(:last-child)": {
-					borderRadius: 0,
-
-					"&.MuiFormControl-root .MuiInputBase-root": {
-						borderRadius: 0,
-					},
-				},
-			}}
 		/>
 	);
 };
+
+const inputGroupAddonVariants = cva(
+	"text-content-secondary h-auto gap-2 text-sm font-medium flex cursor-text items-center justify-center select-none group-has-[input:disabled]/input-group:opacity-50 [&>svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			align: {
+				"inline-start": "pl-3 pr-2 order-first",
+				"inline-end": "pl-1 pr-1.5 order-last",
+			},
+		},
+		defaultVariants: {
+			align: "inline-start",
+		},
+	},
+);
+
+const InputGroupAddon: FC<
+	React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>
+> = ({ className, align = "inline-start", ...props }) => {
+	return (
+		// biome-ignore lint/a11y/useKeyWithClickEvents: Click focuses the input, keyboard users can tab directly to input.
+		<div
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(e) => {
+				if ((e.target as HTMLElement).closest("button")) {
+					return;
+				}
+				e.currentTarget.parentElement
+					?.querySelector<HTMLInputElement>("input")
+					?.focus();
+			}}
+			{...props}
+		/>
+	);
+};
+
+const InputGroupInput = forwardRef<
+	HTMLInputElement,
+	React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+	return (
+		<Input
+			ref={ref}
+			className={cn(
+				// Reset Input's default styles that conflict with group
+				"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0",
+				// Adjust padding based on addon position
+				"group-has-[[data-align=inline-start]]/input-group:pl-0",
+				"group-has-[[data-align=inline-end]]/input-group:pr-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+
+const InputGroupButton: FC<ButtonProps> = ({
+	className,
+	size = "sm",
+	variant = "subtle",
+	...props
+}) => {
+	return (
+		<Button
+			size={size}
+			variant={variant}
+			className={cn(
+				// Override styles for fitting within the group
+				"min-w-0 rounded-[calc(var(--radius)-3px)]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton };

site/src/components/Menu/MenuSearch.tsx

@@ -4,19 +4,5 @@ import {
 } from "components/SearchField/SearchField";
 import type { FC } from "react";
 export const MenuSearch: FC<SearchFieldProps> = (props) => {
-	return (
-		<SearchField
-			fullWidth
-			css={(theme) => ({
-				"& fieldset": {
-					border: 0,
-					borderRadius: 0,
-					// MUI has so many nested selectors that it's easier to just
-					// override the border directly using the `!important` hack
-					borderBottom: `1px solid ${theme.palette.divider} !important`,
-				},
-			})}
-			{...props}
-		/>
-	);
+	return <SearchField className="w-full [&_input]:rounded-none" {...props} />;
 };

site/src/components/SearchField/SearchField.tsx

@@ -1,6 +1,9 @@
-import IconButton from "@mui/material/IconButton";
-import InputAdornment from "@mui/material/InputAdornment";
-import TextField, { type TextFieldProps } from "@mui/material/TextField";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+} from "components/InputGroup/InputGroup";
 import {
 	Tooltip,
 	TooltipContent,
@@ -8,69 +11,91 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import { SearchIcon, XIcon } from "lucide-react";
-import { type FC, useLayoutEffect, useRef } from "react";
+import { forwardRef, useLayoutEffect, useRef } from "react";
 
-export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
+export type SearchFieldProps = {
+	value: string;
 	onChange: (query: string) => void;
+	onClear?: () => void;
+	placeholder?: string;
+	className?: string;
 	autoFocus?: boolean;
+	"aria-label"?: string;
+	"aria-invalid"?: boolean;
+	onBlur?: () => void;
 };
 
-export const SearchField: FC<SearchFieldProps> = ({
-	InputProps,
-	onChange,
-	value = "",
-	autoFocus = false,
-	...textFieldProps
-}) => {
-	// MUI's autoFocus behavior is wonky. If you set autoFocus=true, the
-	// component will keep getting focus on every single render, even if there
-	// are other input elements on screen. We want this to be one-time logic
-	const inputRef = useRef<HTMLInputElement | null>(null);
-	const focusOnMount = useEffectEvent((): void => {
-		if (autoFocus) {
-			inputRef.current?.focus();
-		}
-	});
-	useLayoutEffect(() => {
-		focusOnMount();
-	}, [focusOnMount]);
+export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
+	(
+		{
+			onChange,
+			onClear,
+			value = "",
+			placeholder = "Search...",
+			className,
+			autoFocus = false,
+			onBlur,
+			...ariaProps
+		},
+		forwardedRef,
+	) => {
+		const internalRef = useRef<HTMLInputElement | null>(null);
+		const focusOnMount = useEffectEvent((): void => {
+			if (autoFocus) {
+				internalRef.current?.focus();
+			}
+		});
+		useLayoutEffect(() => {
+			focusOnMount();
+		}, [focusOnMount]);
 
-	return (
-		<TextField
-			inputRef={inputRef}
-			// Specifying min width so that the text box can't shrink so much
-			// that it becomes un-clickable as we add more filter controls
-			className="min-w-[280px]"
-			size="small"
-			value={value}
-			onChange={(e) => onChange(e.target.value)}
-			InputProps={{
-				startAdornment: (
-					<InputAdornment position="start">
-						<SearchIcon className="size-icon-xs text-content-secondary" />
-					</InputAdornment>
-				),
-				endAdornment: value !== "" && (
-					<InputAdornment position="end">
+		const handleClear = () => {
+			if (onClear) {
+				onClear();
+			} else {
+				onChange("");
+			}
+		};
+
+		const setRefs = (el: HTMLInputElement | null) => {
+			internalRef.current = el;
+			if (typeof forwardedRef === "function") {
+				forwardedRef(el);
+			} else if (forwardedRef) {
+				forwardedRef.current = el;
+			}
+		};
+
+		return (
+			<InputGroup className={className}>
+				<InputGroupAddon>
+					<SearchIcon className="size-icon-sm" />
+				</InputGroupAddon>
+				<InputGroupInput
+					ref={setRefs}
+					className="flex-1 h-10"
+					value={value}
+					onChange={(e) => onChange(e.target.value)}
+					onBlur={onBlur}
+					placeholder={placeholder}
+					{...ariaProps}
+				/>
+				{value !== "" && (
+					<InputGroupAddon align="inline-end">
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<IconButton
-									size="small"
-									onClick={() => {
-										onChange("");
-									}}
-								>
-									<XIcon className="size-icon-xs" />
+								<InputGroupButton onClick={handleClear} size="icon">
+									<XIcon />
 									<span className="sr-only">Clear search</span>
-								</IconButton>
+								</InputGroupButton>
 							</TooltipTrigger>
-							<TooltipContent side="bottom">Clear search</TooltipContent>
+							<TooltipContent align="end" sideOffset={8} alignOffset={-8}>
+								Clear search
+							</TooltipContent>
 						</Tooltip>
-					</InputAdornment>
-				),
-				...InputProps,
-			}}
-			{...textFieldProps}
-		/>
-	);
-};
+					</InputGroupAddon>
+				)}
+			</InputGroup>
+		);
+	},
+);

site/src/components/SelectMenu/SelectMenu.stories.tsx

@@ -31,7 +31,7 @@ const meta: Meta<typeof SelectMenu> = {
 					</SelectMenuButton>
 				</SelectMenuTrigger>
 				<SelectMenuContent>
-					<SelectMenuSearch onChange={() => {}} />
+					<SelectMenuSearch value="" onChange={() => {}} />
 					<SelectMenuList>
 						{opts.map((o) => (
 							<SelectMenuItem key={o} selected={o === selectedOpt}>
@@ -83,7 +83,7 @@ export const LongButtonText: Story = {
 					</SelectMenuButton>
 				</SelectMenuTrigger>
 				<SelectMenuContent>
-					<SelectMenuSearch onChange={() => {}} />
+					<SelectMenuSearch value="" onChange={() => {}} />
 					<SelectMenuList>
 						{opts.map((o) => (
 							<SelectMenuItem key={o} selected={o === selectedOpt}>
@@ -110,7 +110,7 @@ export const NoSelectedOption: Story = {
 					<SelectMenuButton className="w-48">All users</SelectMenuButton>
 				</SelectMenuTrigger>
 				<SelectMenuContent>
-					<SelectMenuSearch onChange={action("search")} />
+					<SelectMenuSearch value="" onChange={action("search")} />
 					<SelectMenuList>
 						{opts.map((o) => (
 							<SelectMenuItem key={o}>

site/src/components/SelectMenu/SelectMenu.tsx

@@ -69,14 +69,18 @@ export const SelectMenuButton = forwardRef<
 	);
 });
 
-export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
+export const SelectMenuSearch: FC<SearchFieldProps> = ({
+	className,
+	...props
+}) => {
 	return (
 		<SearchField
-			fullWidth
-			size="medium"
-			className="border border-solid border-border [&_input]:text-sm [&_fieldset]:border-0 [&_fieldset]:rounded-none [&_.MuiInputBase-root]:px-4 [&_.MuiInputBase-root]:py-3"
+			className={cn(
+				"w-full border border-solid border-border [&_input]:text-sm",
+				className,
+			)}
+			autoFocus={true}
 			{...props}
-			inputProps={{ autoFocus: true, ...props.inputProps }}
 		/>
 	);
 };

site/src/modules/tableFiltering/options.tsx

@@ -108,10 +108,10 @@ export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({
 			selectedOption={menu.selectedOption ?? undefined}
 			selectFilterSearch={
 				<SelectFilterSearch
-					inputProps={{ "aria-label": "Search organization" }}
 					placeholder="Search organization..."
 					value={menu.query}
 					onChange={menu.setQuery}
+					aria-label="Search organization"
 				/>
 			}
 			width={width}

site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx

@@ -92,7 +92,12 @@ export const ChartBreadcrumbs: FC<ChartBreadcrumbsProps> = ({
 };
 
 export const ChartSearch = (props: SearchFieldProps) => {
-	return <SearchField css={styles.searchField} {...props} />;
+	return (
+		<SearchField
+			className="flex-1 h-12 rounded-none border-y-0 border-r-0 mr-4"
+			{...props}
+		/>
+	);
 };
 
 export type ChartLegend = {
@@ -210,20 +215,6 @@ const styles = {
 			color: theme.palette.text.primary,
 		},
 	}),
-	searchField: (theme) => ({
-		flex: "1",
-
-		"& fieldset": {
-			border: 0,
-			borderRadius: 0,
-			borderLeft: `1px solid ${theme.palette.divider} !important`,
-		},
-
-		"& .MuiInputBase-root": {
-			height: "100%",
-			fontSize: 12,
-		},
-	}),
 	legends: {
 		listStyle: "none",
 		margin: 0,

site/src/pages/WorkspacesPage/filter/menus.tsx

@@ -85,10 +85,10 @@ export const TemplateMenu: FC<TemplateMenuProps> = ({ width, menu }) => {
 			selectedOption={menu.selectedOption ?? undefined}
 			selectFilterSearch={
 				<SelectFilterSearch
-					inputProps={{ "aria-label": "Search template" }}
 					placeholder="Search template..."
 					value={menu.query}
 					onChange={menu.setQuery}
+					aria-label="Search template"
 				/>
 			}
 		/>