Dec 18, 2025 · Dec 18, 2025 · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts

 // If the organization picker is present on the page, select the default
 // organization.
 const orgPicker = page.getByLabel("Belongs to *");
 const orgPicker = page.getByTestId("organization-autocomplete");
 const organizationsEnabled = await orgPicker.isVisible();
 if (organizationsEnabled) {
 if (orgName !== defaultOrganizationName) {

 // If the organization picker is present on the page, select the default
 // organization.
 const orgPicker = page.getByLabel("Organization *");
 const orgPicker = page.getByTestId("organization-autocomplete");
 const organizationsEnabled = await orgPicker.isVisible();
 if (organizationsEnabled) {
 // The organization picker will be disabled if there is only one option.
diff --git a/site/src/components/Autocomplete/Autocomplete.tsx b/site/src/components/Autocomplete/Autocomplete.tsx
 isOptionEqualToValue?: (option: TOption, value: TOption) => boolean;
 renderOption?: (option: TOption, isSelected: boolean) => ReactNode;
 loading?: boolean;
 label?: string;
 placeholder?: string;
 noOptionsText?: string;
 open?: boolean;
 onInputChange?: (value: string) => void;
 clearable?: boolean;
 disabled?: boolean;
 required?: boolean;
 startAdornment?: ReactNode;
 className?: string;
 id?: string;
 isOptionEqualToValue,
 renderOption,
 loading = false,
 label,
 placeholder = "Select an option",
 noOptionsText = "No results found",
 open: controlledOpen,
 onInputChange,
 clearable = true,
 disabled = false,
 required = false,
 startAdornment,
 className,
 id,
 const displayValue = value ? getOptionLabel(value) : "";
 const showClearButton = clearable && value && !disabled;

 return (
 const autocomplete = (
 <Popover open={isOpen} onOpenChange={handleOpenChange}>
 <PopoverTrigger asChild disabled={disabled}>
 <button
 </PopoverContent>
 </Popover>
 );

 if (label) {
 return (
 <div className="flex flex-col gap-1">
 <label
 htmlFor={id}
 className="text-sm font-medium text-content-primary"
 >
 {label}
 {required && (
 <span className="text-content-destructive ml-0.5">*</span>
 )}
 </label>
 {autocomplete}
 </div>
 );
 }

 return autocomplete;
 }
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
 import { css } from "@emotion/css";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import { checkAuthorization } from "api/queries/authCheck";
 import { organizations } from "api/queries/organizations";
 import type { AuthorizationCheck, Organization } from "api/typesGenerated";
 import { Autocomplete } from "components/Autocomplete/Autocomplete";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { typeComponentProps, typeFC, useEffect, useState } from "react";
 import { type FC, useEffect, useState } from "react";
 import { useQuery } from "react-query";

 type OrganizationAutocompleteProps = {
 onChange: (organization: Organization | null) => void;
 label?: string;
 className?: string;
 size?: ComponentProps<typeof TextField>["size"];
 required?: boolean;
 check?: AuthorizationCheck;
 error?: boolean;
 helperText?: React.ReactNode;
 };

 export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 onChange,
 label,
 className,
 size = "small",
 required,
 check,
 error,
 helperText,
 }) => {
 const [open, setOpen] = useState(false);
 const [selected, setSelected] = useState<Organization | null>(null);
 const organizationsQuery = useQuery(organizations());
 const checks =
 }, [options, selected, onChange]);

 return (
 <Autocomplete
 noOptionsText="No organizations found"
 className={className}
 options={options}
 disabled={options.length === 1}
 value={selected}
 loading={organizationsQuery.isLoading}
 data-testid="organization-autocomplete"
 open={open}
 isOptionEqualToValue={(a, b) => a.id === b.id}
 getOptionLabel={(option) => option.display_name}
 onOpen={() => {
 setOpen(true);
 }}
 onClose={() => {
 setOpen(false);
 }}
 onChange={(_, newValue) => {
 setSelected(newValue);
 onChange(newValue);
 }}
 renderOption={({ key, ...props }, option) => (
 <li key={key} {...props}>
 <div className="flex flex-col gap-2">
 <Autocomplete
 value={selected}
 onChange={(newValue) => {
 setSelected(newValue);
 onChange(newValue);
 }}
 options={options}
 getOptionValue={(option) => option.id}
 getOptionLabel={(option) => option.display_name}
 isOptionEqualToValue={(a, b) => a.id === b.id}
 renderOption={(option) => (
 <AvatarData
 title={option.display_name}
 subtitle={option.name}
 src={option.icon}
 />
 </li>
 )}
 label={label}
 placeholder="Organization name"
 noOptionsText="No organizations found"
 loading={organizationsQuery.isLoading}
 disabled={options.length === 1}
 required={required}
 startAdornment={
 selected && (
 <Avatar size="sm" src={selected.icon} fallback={selected.name} />
 )
 }
 className={className}
 data-testid="organization-autocomplete"
 />
 {helperText && (
 <span
 className={`text-xs ${error ? "text-content-destructive" : "text-content-secondary"}`}
 >
 {helperText}
 </span>
 )}
 renderInput={(params) => (
 <TextField
 {...params}
 required={required}
 fullWidth
 size={size}
 label={label}
 placeholder="Organization name"
 css={{
 "&:not(:has(label))": {
 margin: 0,
 },
 }}
 InputProps={{
 ...params.InputProps,
 startAdornment: selected && (
 <Avatar size="sm" src={selected.icon} fallback={selected.name} />
 ),
 endAdornment: (
 <>
 {organizationsQuery.isFetching && open && (
 <CircularProgress size={16} />
 )}
 {params.InputProps.endAdornment}
 </>
 ),
 classes: { root },
 }}
 InputLabelProps={{
 shrink: true,
 }}
 />
 )}
 />
 </div>
 );
 };

 const root = css`
 padding-left: 14px !important; // Same padding left as input
 gap: 4px;
 `;
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
 sideOffset={sideOffset}
 collisionPadding={16}
 className={cn(
 `z-50 w-72 rounded-md border border-solid bg-surface-primary
 text-content-primary shadow-md outline-none
 data-[state=open]:animate-in data-[state=closed]:animate-out
 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
 // z-[1400] is required to appear above MUI dialogs (z-index: 1300) during
 // migration. Can be reduced to z-50 once MUI is fully removed.
 `z-[1400] w-72 rounded-md border border-solid bg-surface-primary
 text-content-primary shadow-md outline-none
 data-[state=open]:animate-in data-[state=closed]:animate-out
 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
 className,
 )}
 {...props}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -266,7 +266,7 @@ export const createTemplate = async (

		// If the organization picker is present on the page, select the default
		// organization.
		const orgPicker = page.getByLabel("Belongs to *");
		const orgPicker = page.getByTestId("organization-autocomplete");
		const organizationsEnabled = await orgPicker.isVisible();
		if (organizationsEnabled) {
		if (orgName !== defaultOrganizationName) {
Expand DownExpand Up		@@ -1233,7 +1233,7 @@ export async function createUser(

		// If the organization picker is present on the page, select the default
		// organization.
		const orgPicker = page.getByLabel("Organization *");
		const orgPicker = page.getByTestId("organization-autocomplete");
		const organizationsEnabled = await orgPicker.isVisible();
		if (organizationsEnabled) {
		// The organization picker will be disabled if there is only one option.
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,6 +30,7 @@ interface AutocompleteProps<TOption> {
		isOptionEqualToValue?: (option: TOption, value: TOption) => boolean;
		renderOption?: (option: TOption, isSelected: boolean) => ReactNode;
		loading?: boolean;
		label?: string;
		placeholder?: string;
		noOptionsText?: string;
		open?: boolean;
Expand All		@@ -38,6 +39,7 @@ interface AutocompleteProps<TOption> {
		onInputChange?: (value: string) => void;
		clearable?: boolean;
		disabled?: boolean;
		required?: boolean;
		startAdornment?: ReactNode;
		className?: string;
		id?: string;
Expand All		@@ -53,6 +55,7 @@ export function Autocomplete<TOption>({
		isOptionEqualToValue,
		renderOption,
		loading = false,
		label,
		placeholder = "Select an option",
		noOptionsText = "No results found",
		open: controlledOpen,
Expand All		@@ -61,6 +64,7 @@ export function Autocomplete<TOption>({
		onInputChange,
		clearable = true,
		disabled = false,
		required = false,
		startAdornment,
		className,
		id,
Expand DownExpand Up		@@ -135,7 +139,7 @@ export function Autocomplete<TOption>({
		const displayValue = value ? getOptionLabel(value) : "";
		const showClearButton = clearable && value && !disabled;

		return (
		const autocomplete = (
		<Popover open={isOpen} onOpenChange={handleOpenChange}>
		<PopoverTrigger asChild disabled={disabled}>
		<button
Expand DownExpand Up		@@ -249,4 +253,23 @@ export function Autocomplete<TOption>({
		</PopoverContent>
		</Popover>
		);

		if (label) {
		return (
		<div className="flex flex-col gap-1">
		<label
		htmlFor={id}
		className="text-sm font-medium text-content-primary"
		>
		{label}
		{required && (
		<span className="text-content-destructive ml-0.5">*</span>
		)}
		</label>
		{autocomplete}
		</div>
		);
		}

		return autocomplete;
		}
Original file line number	Diff line number	Diff line change
		@@ -1,33 +1,31 @@
		import { css } from "@emotion/css";
		import Autocomplete from "@mui/material/Autocomplete";
		import CircularProgress from "@mui/material/CircularProgress";
		import TextField from "@mui/material/TextField";
		import { checkAuthorization } from "api/queries/authCheck";
		import { organizations } from "api/queries/organizations";
		import type { AuthorizationCheck, Organization } from "api/typesGenerated";
		import { Autocomplete } from "components/Autocomplete/Autocomplete";
		import { Avatar } from "components/Avatar/Avatar";
		import { AvatarData } from "components/Avatar/AvatarData";
		import { typeComponentProps, typeFC, useEffect, useState } from "react";
		import { type FC, useEffect, useState } from "react";
		import { useQuery } from "react-query";

		type OrganizationAutocompleteProps = {
		onChange: (organization: Organization \| null) => void;
		label?: string;
		className?: string;
		size?: ComponentProps<typeof TextField>["size"];
		required?: boolean;
		check?: AuthorizationCheck;
		error?: boolean;
		helperText?: React.ReactNode;
		};

		export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
		onChange,
		label,
		className,
		size = "small",
		required,
		check,
		error,
		helperText,
		}) => {
		const [open, setOpen] = useState(false);
		const [selected, setSelected] = useState<Organization \| null>(null);
		const organizationsQuery = useQuery(organizations());
		const checks =
Expand DownExpand Up		@@ -73,74 +71,45 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
		}, [options, selected, onChange]);

		return (
		<Autocomplete
		noOptionsText="No organizations found"
		className={className}
		options={options}
		disabled={options.length === 1}
		value={selected}
		loading={organizationsQuery.isLoading}
		data-testid="organization-autocomplete"
		open={open}
		isOptionEqualToValue={(a, b) => a.id === b.id}
		getOptionLabel={(option) => option.display_name}
		onOpen={() => {
		setOpen(true);
		}}
		onClose={() => {
		setOpen(false);
		}}
		onChange={(_, newValue) => {
		setSelected(newValue);
		onChange(newValue);
		}}
		renderOption={({ key, ...props }, option) => (
		<li key={key} {...props}>
		<div className="flex flex-col gap-2">
		<Autocomplete
		value={selected}
		onChange={(newValue) => {
		setSelected(newValue);
		onChange(newValue);
		}}
		options={options}
		getOptionValue={(option) => option.id}
		getOptionLabel={(option) => option.display_name}
		isOptionEqualToValue={(a, b) => a.id === b.id}
		renderOption={(option) => (
		<AvatarData
		title={option.display_name}
		subtitle={option.name}
		src={option.icon}
		/>
		</li>
		)}
		label={label}
		placeholder="Organization name"
		noOptionsText="No organizations found"
		loading={organizationsQuery.isLoading}
		disabled={options.length === 1}
		required={required}
		startAdornment={
		selected && (
		<Avatar size="sm" src={selected.icon} fallback={selected.name} />
		)
		}
		className={className}
		data-testid="organization-autocomplete"
		/>
		{helperText && (
		<span
		className={`text-xs ${error ? "text-content-destructive" : "text-content-secondary"}`}
		>
		{helperText}
		</span>
		)}
		renderInput={(params) => (
		<TextField
		{...params}
		required={required}
		fullWidth
		size={size}
		label={label}
		placeholder="Organization name"
		css={{
		"&:not(:has(label))": {
		margin: 0,
		},
		}}
		InputProps={{
		...params.InputProps,
		startAdornment: selected && (
		<Avatar size="sm" src={selected.icon} fallback={selected.name} />
		),
		endAdornment: (
		<>
		{organizationsQuery.isFetching && open && (
		<CircularProgress size={16} />
		)}
		{params.InputProps.endAdornment}
		</>
		),
		classes: { root },
		}}
		InputLabelProps={{
		shrink: true,
		}}
		/>
		)}
		/>
		</div>
		);
		};

		const root = css`
		padding-left: 14px !important; // Same padding left as input
		gap: 4px;
		`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,13 +31,15 @@ export const PopoverContent = forwardRef<
		sideOffset={sideOffset}
		collisionPadding={16}
		className={cn(
		`z-50 w-72 rounded-md border border-solid bg-surface-primary
		text-content-primary shadow-md outline-none
		data-[state=open]:animate-in data-[state=closed]:animate-out
		data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
		data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
		data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
		data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
		// z-[1400] is required to appear above MUI dialogs (z-index: 1300) during
		// migration. Can be reduced to z-50 once MUI is fully removed.
		`z-[1400] w-72 rounded-md border border-solid bg-surface-primary
		text-content-primary shadow-md outline-none
		data-[state=open]:animate-in data-[state=closed]:animate-out
		data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
		data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
		data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
		data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
		className,
		)}
		{...props}
Expand Down