diff --git a/static/app/components/charts/optionSelector.tsx b/static/app/components/charts/optionSelector.tsx
index 9bb71b2ebda183..c7a2c7e8e41aa2 100644
--- a/static/app/components/charts/optionSelector.tsx
+++ b/static/app/components/charts/optionSelector.tsx
@@ -20,19 +20,18 @@ type BaseProps = {
 interface SingleProps
   extends Omit<
       SingleSelectProps<string>,
-      'onChange' | 'defaultValue' | 'multiple' | 'title'
+      'onChange' | 'defaultValue' | 'multiple' | 'title' | 'value'
     >,
     BaseProps {
   onChange: (value: string) => void;
   selected: string;
-  defaultValue?: string;
   multiple?: false;
 }
 
 interface MultipleProps
   extends Omit<
       MultipleSelectProps<string>,
-      'onChange' | 'defaultValue' | 'multiple' | 'title'
+      'onChange' | 'defaultValue' | 'multiple' | 'title' | 'value'
     >,
     BaseProps {
   multiple: true;
@@ -48,7 +47,6 @@ function OptionSelector({
   title,
   featureType,
   multiple,
-  defaultValue,
   closeOnSelect,
   ...rest
 }: SingleProps | MultipleProps) {
@@ -68,7 +66,6 @@ function OptionSelector({
       return {
         multiple,
         value: selected,
-        defaultValue,
         onChange: (sel: Array<SelectOption<string>>) => {
           onChange?.(sel.map(o => o.value));
         },
@@ -79,11 +76,10 @@ function OptionSelector({
     return {
       multiple,
       value: selected,
-      defaultValue,
       onChange: (opt: any) => onChange?.(opt.value),
       closeOnSelect,
     };
-  }, [multiple, selected, defaultValue, onChange, closeOnSelect]);
+  }, [multiple, selected, onChange, closeOnSelect]);
 
   function isOptionDisabled(option: SelectOptionWithKey<string>) {
     return Boolean(
diff --git a/static/app/components/core/compactSelect/compactSelect.spec.tsx b/static/app/components/core/compactSelect/compactSelect.spec.tsx
index 8090b0778b019f..4ad0b031c45d7e 100644
--- a/static/app/components/core/compactSelect/compactSelect.spec.tsx
+++ b/static/app/components/core/compactSelect/compactSelect.spec.tsx
@@ -8,6 +8,8 @@ describe('CompactSelect', () => {
   it('renders', async () => {
     render(
       <CompactSelect
+        value={undefined}
+        onChange={jest.fn()}
         options={[
           {value: 'opt_one', label: 'Option One'},
           {value: 'opt_two', label: 'Option Two'},
@@ -21,6 +23,8 @@ describe('CompactSelect', () => {
     render(
       <CompactSelect
         disabled
+        value={undefined}
+        onChange={jest.fn()}
         options={[
           {value: 'opt_one', label: 'Option One'},
           {value: 'opt_two', label: 'Option Two'},
@@ -34,6 +38,8 @@ describe('CompactSelect', () => {
     render(
       <CompactSelect
         menuTitle="Menu title"
+        value={undefined}
+        onChange={jest.fn()}
         options={[
           {value: 'opt_one', label: 'Option One'},
           {value: 'opt_two', label: 'Option Two'},
@@ -53,6 +59,7 @@ describe('CompactSelect', () => {
         <CompactSelect
           value="opt_one"
           menuTitle="Menu A"
+          onChange={jest.fn()}
           options={[
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
@@ -61,6 +68,7 @@ describe('CompactSelect', () => {
         <CompactSelect
           value="opt_three"
           menuTitle="Menu B"
+          onChange={jest.fn()}
           options={[
             {value: 'opt_three', label: 'Option Three'},
             {value: 'opt_four', label: 'Option Four'},
@@ -110,6 +118,7 @@ describe('CompactSelect', () => {
       const mock = jest.fn();
       render(
         <CompactSelect
+          value={undefined}
           options={[
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
@@ -138,6 +147,7 @@ describe('CompactSelect', () => {
             {value: 'opt_two', label: 'Option Two'},
           ]}
           onChange={mock}
+          value={undefined}
         />
       );
 
@@ -165,6 +175,7 @@ describe('CompactSelect', () => {
             {value: '"opt_two"', label: 'Option Two'},
           ]}
           onChange={mock}
+          value={undefined}
         />
       );
 
@@ -186,6 +197,7 @@ describe('CompactSelect', () => {
         <CompactSelect
           triggerProps={{prefix: 'Prefix'}}
           value="opt_one"
+          onChange={jest.fn()}
           options={[
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
@@ -206,6 +218,8 @@ describe('CompactSelect', () => {
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
           ]}
+          value={undefined}
+          onChange={jest.fn()}
         />
       );
 
@@ -224,6 +238,8 @@ describe('CompactSelect', () => {
     it('can search with sections', async () => {
       render(
         <CompactSelect
+          value={undefined}
+          onChange={jest.fn()}
           searchable
           searchPlaceholder="Search here…"
           options={[
@@ -265,6 +281,8 @@ describe('CompactSelect', () => {
     it('can limit the number of options', async () => {
       render(
         <CompactSelect
+          value={undefined}
+          onChange={jest.fn()}
           sizeLimit={2}
           sizeLimitMessage="Use search for more options…"
           searchable
@@ -316,6 +334,8 @@ describe('CompactSelect', () => {
         <CompactSelect
           multiple
           onSectionToggle={mock}
+          value={undefined}
+          onChange={jest.fn()}
           options={[
             {
               key: 'section-1',
@@ -424,6 +444,8 @@ describe('CompactSelect', () => {
       render(
         <CompactSelect
           onClose={onCloseMock}
+          value={undefined}
+          onChange={jest.fn()}
           options={[
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
@@ -449,6 +471,7 @@ describe('CompactSelect', () => {
       render(
         <CompactSelect
           grid
+          value={undefined}
           options={[
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
@@ -473,6 +496,7 @@ describe('CompactSelect', () => {
         <CompactSelect
           grid
           multiple
+          value={undefined}
           options={[
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
@@ -506,6 +530,7 @@ describe('CompactSelect', () => {
             {value: '"opt_two"', label: 'Option Two'},
           ]}
           onChange={mock}
+          value={undefined}
         />
       );
 
@@ -532,6 +557,7 @@ describe('CompactSelect', () => {
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
           ]}
+          onChange={jest.fn()}
         />
       );
       expect(
@@ -549,6 +575,8 @@ describe('CompactSelect', () => {
             {value: 'opt_one', label: 'Option One'},
             {value: 'opt_two', label: 'Option Two'},
           ]}
+          value={undefined}
+          onChange={jest.fn()}
         />
       );
 
@@ -576,6 +604,8 @@ describe('CompactSelect', () => {
             {value: 'opt_two', label: 'Option Two'},
             {value: 'opt_three', label: 'Option Three'},
           ]}
+          value={undefined}
+          onChange={jest.fn()}
         />
       );
 
@@ -614,6 +644,8 @@ describe('CompactSelect', () => {
           grid
           multiple
           onSectionToggle={mock}
+          value={undefined}
+          onChange={jest.fn()}
           options={[
             {
               key: 'section-1',
@@ -722,6 +754,8 @@ describe('CompactSelect', () => {
       render(
         <CompactSelect
           grid
+          value={undefined}
+          onChange={jest.fn()}
           onClose={onCloseMock}
           options={[
             {value: 'opt_one', label: 'Option One'},
@@ -748,6 +782,8 @@ describe('CompactSelect', () => {
       render(
         <CompactSelect
           grid
+          value={undefined}
+          onChange={jest.fn()}
           options={[
             {
               value: 'opt_one',
diff --git a/static/app/components/core/compactSelect/composite.spec.tsx b/static/app/components/core/compactSelect/composite.spec.tsx
index 13e98c4b002eda..c1a55a70f630bd 100644
--- a/static/app/components/core/compactSelect/composite.spec.tsx
+++ b/static/app/components/core/compactSelect/composite.spec.tsx
@@ -69,7 +69,8 @@ describe('CompactSelect', () => {
       <CompositeSelect disabled>
         <CompositeSelect.Region
           label="Region 1"
-          onChange={() => {}}
+          onChange={jest.fn()}
+          value={undefined}
           options={[
             {value: 'choice_one', label: 'Choice One'},
             {value: 'choice_two', label: 'Choice Two'},
@@ -87,7 +88,8 @@ describe('CompactSelect', () => {
       <CompositeSelect>
         <CompositeSelect.Region
           label="Region 1"
-          onChange={() => {}}
+          onChange={jest.fn()}
+          value={undefined}
           options={[
             {value: 'choice_one', label: 'Choice One'},
             {value: 'choice_two', label: 'Choice Two'},
@@ -96,7 +98,8 @@ describe('CompactSelect', () => {
         <CompositeSelect.Region
           multiple
           label="Region 2"
-          onChange={() => {}}
+          onChange={jest.fn()}
+          value={undefined}
           options={[
             {value: 'choice_three', label: 'Choice Three'},
             {value: 'choice_four', label: 'Choice Four'},
@@ -143,6 +146,7 @@ describe('CompactSelect', () => {
         <CompositeSelect.Region
           label="Region 1"
           onChange={region1Mock}
+          value={undefined}
           options={[
             {value: 'choice_one', label: 'Choice One'},
             {value: 'choice_two', label: 'Choice Two'},
@@ -152,6 +156,7 @@ describe('CompactSelect', () => {
           multiple
           label="Region 2"
           onChange={region2Mock}
+          value={undefined}
           options={[
             {value: 'choice_three', label: 'Choice Three'},
             {value: 'choice_four', label: 'Choice Four'},
@@ -212,7 +217,8 @@ describe('CompactSelect', () => {
       <CompositeSelect searchable searchPlaceholder="Search placeholder…">
         <CompositeSelect.Region
           label="Region 1"
-          onChange={() => {}}
+          onChange={jest.fn()}
+          value={undefined}
           options={[
             {value: 'choice_one', label: 'Choice One'},
             {value: 'choice_two', label: 'Choice Two'},
@@ -221,7 +227,8 @@ describe('CompactSelect', () => {
         <CompositeSelect.Region
           multiple
           label="Region 2"
-          onChange={() => {}}
+          onChange={jest.fn()}
+          value={undefined}
           options={[
             {value: 'choice_three', label: 'Choice Three'},
             {value: 'choice_four', label: 'Choice Four'},
@@ -262,7 +269,8 @@ describe('CompactSelect', () => {
         <CompositeSelect.Region
           multiple
           label="Region 2"
-          onChange={() => {}}
+          onChange={jest.fn()}
+          value={undefined}
           options={[
             {value: 'choice_three', label: 'Choice Three'},
             {value: 'choice_four', label: 'Choice Four'},
diff --git a/static/app/components/core/compactSelect/list.tsx b/static/app/components/core/compactSelect/list.tsx
index 6ed81123892711..b667faee6b9ea6 100644
--- a/static/app/components/core/compactSelect/list.tsx
+++ b/static/app/components/core/compactSelect/list.tsx
@@ -100,25 +100,25 @@ interface BaseListProps<Value extends SelectKey>
 }
 
 export interface SingleListProps<Value extends SelectKey> extends BaseListProps<Value> {
+  onChange: (selectedOption: SelectOption<Value>) => void;
+  value: Value | undefined;
   /**
    * Whether to close the menu. Accepts either a boolean value or a callback function
    * that receives the newly selected option and returns whether to close the menu.
    */
   closeOnSelect?: boolean | ((selectedOption: SelectOption<Value>) => boolean);
   multiple?: false;
-  onChange?: (selectedOption: SelectOption<Value>) => void;
-  value?: Value;
 }
 
 export interface MultipleListProps<Value extends SelectKey> extends BaseListProps<Value> {
   multiple: true;
+  onChange: (selectedOptions: Array<SelectOption<Value>>) => void;
+  value: Value[] | undefined;
   /**
    * Whether to close the menu. Accepts either a boolean value or a callback function
    * that receives the newly selected options and returns whether to close the menu.
    */
   closeOnSelect?: boolean | ((selectedOptions: Array<SelectOption<Value>>) => boolean);
-  onChange?: (selectedOptions: Array<SelectOption<Value>>) => void;
-  value?: Value[];
 }
 
 /**
diff --git a/static/app/components/core/compactSelect/listBox/index.spec.tsx b/static/app/components/core/compactSelect/listBox/index.spec.tsx
index c27b1b8cfa581c..8af1c35ae558fd 100644
--- a/static/app/components/core/compactSelect/listBox/index.spec.tsx
+++ b/static/app/components/core/compactSelect/listBox/index.spec.tsx
@@ -6,6 +6,8 @@ describe('ListBox', () => {
   it('hides details overlay when mouse leaves the list', async () => {
     render(
       <CompactSelect
+        onChange={jest.fn()}
+        value={undefined}
         options={[
           {
             value: 'opt_one',
@@ -42,6 +44,8 @@ describe('ListBox', () => {
   it('shows different details when hovering over different options', async () => {
     render(
       <CompactSelect
+        onChange={jest.fn()}
+        value={undefined}
         options={[
           {
             value: 'opt_one',
@@ -81,6 +85,8 @@ describe('ListBox', () => {
   it('does not show details overlay when showDetailsInOverlay is false', async () => {
     render(
       <CompactSelect
+        onChange={jest.fn()}
+        value={undefined}
         options={[
           {
             value: 'opt_one',
@@ -105,6 +111,8 @@ describe('ListBox', () => {
   it('maintains keyboard navigation focus when hovering', async () => {
     render(
       <CompactSelect
+        onChange={jest.fn()}
+        value={undefined}
         options={[
           {
             value: 'opt_one',
diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx
index 2991ebe9fc9465..25cf0c8f729284 100644
--- a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx
+++ b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx
@@ -1,5 +1,4 @@
 import {useMemo, useState} from 'react';
-import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {ProjectAvatar} from '@sentry/scraps/avatar';
@@ -67,7 +66,6 @@ export function BreadcrumbsDrawer({
   focusControl: initialFocusControl,
 }: BreadcrumbsDrawerProps) {
   const organization = useOrganization();
-  const theme = useTheme();
   const [container, setContainer] = useState<HTMLElement | null>(null);
 
   const [search, setSearch] = useState('');
@@ -122,6 +120,7 @@ export function BreadcrumbsDrawer({
       </InputGroup>
       <CompactSelect
         size="xs"
+        value={filters}
         onChange={options => {
           const newFilters = options.map(({value}) => value);
           setFilters(newFilters);
@@ -134,23 +133,22 @@ export function BreadcrumbsDrawer({
         options={filterOptions}
         maxMenuHeight={400}
         trigger={props => (
-          <VisibleFocusButton
+          <Button
             size="xs"
             borderless
-            style={{background: filters.length > 0 ? theme.purple100 : 'transparent'}}
             icon={<IconFilter />}
             aria-label={t('Filter All Breadcrumbs')}
             {...props}
             {...getFocusProps(BreadcrumbControlOptions.FILTER)}
           >
             {filters.length > 0 ? filters.length : null}
-          </VisibleFocusButton>
+          </Button>
         )}
       />
       <CompactSelect
         size="xs"
         trigger={props => (
-          <VisibleFocusButton
+          <Button
             size="xs"
             borderless
             icon={<IconSort />}
@@ -255,11 +253,6 @@ export function BreadcrumbsDrawer({
   );
 }
 
-const VisibleFocusButton = styled(Button)`
-  box-shadow: ${p => (p.autoFocus ? p.theme.button.default.focusBorder : 'transparent')} 0
-    0 0 1px;
-`;
-
 const TimelineContainer = styled('div')`
   grid-column: span 2;
 `;
diff --git a/static/app/components/events/interfaces/searchBarAction.tsx b/static/app/components/events/interfaces/searchBarAction.tsx
index 4d62bc311efff6..40a8c6801394bc 100644
--- a/static/app/components/events/interfaces/searchBarAction.tsx
+++ b/static/app/components/events/interfaces/searchBarAction.tsx
@@ -12,12 +12,12 @@ import {t, tn} from 'sentry/locale';
 
 type Props = {
   onChange: (value: string) => void;
+  onFilterChange: (options: Array<SelectOption<string>>) => void;
   placeholder: string;
   query: string;
   className?: string;
   filterOptions?: Array<SelectOptionOrSection<string>>;
   filterSelections?: Array<SelectOption<string>>;
-  onFilterChange?: (options: Array<SelectOption<string>>) => void;
 };
 
 function SearchBarAction({
diff --git a/static/app/components/forms/fields/index.stories.tsx b/static/app/components/forms/fields/index.stories.tsx
index dad77efaa7ddda..ab8544e40bc24f 100644
--- a/static/app/components/forms/fields/index.stories.tsx
+++ b/static/app/components/forms/fields/index.stories.tsx
@@ -148,6 +148,8 @@ export default Storybook.story('Form', story => {
           columnLabels={{thing_1: 'Thing 1', thing_2: 'Thing 2'}}
           onChange={() => {}}
           addDropdown={{
+            value: undefined,
+            onChange: () => {},
             emptyMessage: 'All items mapped',
             noResultsMessage: 'No options found',
             items: [
diff --git a/static/app/components/onboarding/platformOptionDropdown.tsx b/static/app/components/onboarding/platformOptionDropdown.tsx
index 48b8da725a7230..56c74e52c0c591 100644
--- a/static/app/components/onboarding/platformOptionDropdown.tsx
+++ b/static/app/components/onboarding/platformOptionDropdown.tsx
@@ -8,22 +8,10 @@ import {t} from 'sentry/locale';
 import useRouter from 'sentry/utils/useRouter';
 
 type OptionControlProps = {
-  /**
-   * The platform options for which the control is rendered
-   */
+  onChange: (selectedOption: SelectOption<string>) => void;
   option: PlatformOption<any>;
-  /**
-   * Value of the currently selected item
-   */
   value: string;
-  /**
-   * Whether the option is disabled
-   */
   disabled?: boolean;
-  /**
-   * Click handler
-   */
-  onChange?: (selectedOption: SelectOption<string>) => void;
 };
 
 type PlatformOptionsControlProps = {
diff --git a/static/app/views/performance/transactionSummary/spanCategoryFilter.tsx b/static/app/views/performance/transactionSummary/spanCategoryFilter.tsx
index fd9609ccbba008..563d007c6dcb23 100644
--- a/static/app/views/performance/transactionSummary/spanCategoryFilter.tsx
+++ b/static/app/views/performance/transactionSummary/spanCategoryFilter.tsx
@@ -69,14 +69,6 @@ export function SpanCategoryFilter({serviceEntrySpanName}: Props) {
       }))
   );
 
-  if (isError) {
-    return (
-      <Tooltip title={t('Error loading span categories')}>
-        <CompactSelect disabled options={[]} />
-      </Tooltip>
-    );
-  }
-
   const onChange = (selectedOption: SelectOption<string> | null) => {
     setSelectedCategory(selectedOption?.value ?? undefined);
 
@@ -89,6 +81,14 @@ export function SpanCategoryFilter({serviceEntrySpanName}: Props) {
     });
   };
 
+  if (isError) {
+    return (
+      <Tooltip title={t('Error loading span categories')}>
+        <CompactSelect disabled options={[]} value={undefined} onChange={onChange} />
+      </Tooltip>
+    );
+  }
+
   return (
     <CompactSelect
       clearable
diff --git a/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.spec.tsx b/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.spec.tsx
index 15cf95fe43445f..4cc4830924cb1d 100644
--- a/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.spec.tsx
+++ b/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.spec.tsx
@@ -10,6 +10,7 @@ describe('Settings Breadcrumb Dropdown', () => {
   const createWrapper = () => {
     return render(
       <BreadcrumbDropdown
+        value={undefined}
         route={{path: '/', name: 'root'}}
         options={[
           {value: '1', label: 'foo'},
@@ -74,6 +75,7 @@ describe('Settings Breadcrumb Dropdown', () => {
     render(
       <Fragment>
         <BreadcrumbDropdown
+          value={undefined}
           route={{path: '/', name: 'root'}}
           options={[
             {value: '1', label: 'foo'},
@@ -84,6 +86,7 @@ describe('Settings Breadcrumb Dropdown', () => {
           onCrumbSelect={selectMock}
         />
         <BreadcrumbDropdown
+          value={undefined}
           route={{path: '/', name: 'root'}}
           options={[
             {value: '1', label: 'baz'},
diff --git a/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.tsx b/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.tsx
index 65dc997a2378f9..ebd6a5b3bb887e 100644
--- a/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.tsx
+++ b/static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.tsx
@@ -12,7 +12,7 @@ import Crumb from './crumb';
 import Divider from './divider';
 import type {RouteWithName} from './types';
 
-interface BreadcrumbDropdownProps extends SingleSelectProps<string> {
+interface BreadcrumbDropdownProps extends Omit<SingleSelectProps<string>, 'onChange'> {
   name: React.ReactNode;
   onCrumbSelect: (value: string) => void;
   route: RouteWithName;
@@ -45,7 +45,7 @@ function BreadcrumbDropdown({
   }
 
   return (
-    <CompactSelect<string>
+    <CompactSelect
       searchable
       options={options.map(item => ({...item, hideCheck: true}))}
       onChange={selected => {
diff --git a/static/app/views/settings/organizationIntegrations/integrationReposAddRepository.tsx b/static/app/views/settings/organizationIntegrations/integrationReposAddRepository.tsx
index f14866118e5577..aa48fbef8db9ac 100644
--- a/static/app/views/settings/organizationIntegrations/integrationReposAddRepository.tsx
+++ b/static/app/views/settings/organizationIntegrations/integrationReposAddRepository.tsx
@@ -126,6 +126,7 @@ export function IntegrationReposAddRepository({
       options={dropdownItems}
       onChange={addRepo}
       disabled={false}
+      value={undefined}
       menuTitle={t('Repositories')}
       emptyMessage={
         query.isFetching
diff --git a/static/app/views/settings/organizationTeams/teamMembers.tsx b/static/app/views/settings/organizationTeams/teamMembers.tsx
index b5d946fac45eb6..f4e811f5a158e5 100644
--- a/static/app/views/settings/organizationTeams/teamMembers.tsx
+++ b/static/app/views/settings/organizationTeams/teamMembers.tsx
@@ -145,6 +145,7 @@ function AddMemberDropdown({
       menuWidth={250}
       options={items}
       onClose={() => setMemberQuery('')}
+      value={undefined}
       onChange={
         canAddMembers
           ? addTeamMember
diff --git a/static/gsAdmin/components/dropdownActions.tsx b/static/gsAdmin/components/dropdownActions.tsx
index 629d2d560d7f8b..da581cfba86a86 100644
--- a/static/gsAdmin/components/dropdownActions.tsx
+++ b/static/gsAdmin/components/dropdownActions.tsx
@@ -59,6 +59,7 @@ function DropdownActions({actions, label}: Props) {
     <CompactSelect
       searchable
       options={mapActionsToCompactSelect(actions)}
+      value={undefined}
       onChange={option => {
         const action = actions.find(a => a.key === option.value);
         if (!action || action.disabled) {