ref(compactSelect): improve clearing values

static/app/components/assigneeSelectorDropdown.tsx

@@ -311,7 +311,7 @@ export default function AssigneeSelectorDropdown({
       }));
   };
 
-  const handleSelect = (selectedOption: SelectOption<string> | null) => {
+  const handleSelect = (selectedOption: SelectOption<string> | undefined) => {
     // selectedOption is falsey when the option selected is already selected, or when the clear button is clicked
     if (!selectedOption) {
       if (onClear && group.assignedTo) {
@@ -565,7 +565,6 @@ export default function AssigneeSelectorDropdown({
         className={className}
         menuWidth={275}
         position="bottom-end"
-        disallowEmptySelection={false}
         onClick={e => e.stopPropagation()}
         value={
           group.assignedTo

static/app/components/charts/optionSelector.tsx

@@ -1,6 +1,8 @@
 import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 
+import type {DistributiveOmit} from '@sentry/scraps/types';
+
 import {FeatureBadge} from 'sentry/components/core/badge';
 import type {
   MultipleSelectProps,
@@ -17,28 +19,39 @@ type BaseProps = {
   featureType?: 'alpha' | 'beta' | 'new';
 };
 
-interface SingleProps
-  extends Omit<
-      SingleSelectProps<string>,
-      'onChange' | 'defaultValue' | 'multiple' | 'title' | 'value'
-    >,
-    BaseProps {
-  onChange: (value: string) => void;
-  selected: string;
-  multiple?: false;
-}
+type SingleUnClearableProps = DistributiveOmit<
+  SingleSelectProps<string>,
+  'onChange' | 'multiple' | 'title' | 'value'
+> &
+  BaseProps & {
+    onChange: (value: string) => void;
+    selected: string;
+    clearable?: false;
+    multiple?: false;
+  };
 
-interface MultipleProps
-  extends Omit<
-      MultipleSelectProps<string>,
-      'onChange' | 'defaultValue' | 'multiple' | 'title' | 'value'
-    >,
-    BaseProps {
-  multiple: true;
-  onChange: (value: string[]) => void;
-  selected: string[];
-  defaultValue?: string[];
-}
+type SingleClearableProps = DistributiveOmit<
+  SingleSelectProps<string>,
+  'onChange' | 'multiple' | 'title' | 'value'
+> &
+  BaseProps & {
+    clearable: true;
+    onChange: (value: string | undefined) => void;
+    selected: string;
+    multiple?: false;
+  };
+
+type SingleProps = SingleClearableProps | SingleUnClearableProps;
+
+type MultipleProps = DistributiveOmit<
+  MultipleSelectProps<string>,
+  'onChange' | 'multiple' | 'title' | 'value'
+> &
+  BaseProps & {
+    multiple: true;
+    onChange: (value: string[]) => void;
+    selected: string[];
+  };
 
 function OptionSelector({
   options,
@@ -48,6 +61,7 @@ function OptionSelector({
   featureType,
   multiple,
   closeOnSelect,
+  clearable,
   ...rest
 }: SingleProps | MultipleProps) {
   const mappedOptions = useMemo(() => {
@@ -65,6 +79,7 @@ function OptionSelector({
     if (multiple) {
       return {
         multiple,
+        clearable,
         value: selected,
         onChange: (sel: Array<SelectOption<string>>) => {
           onChange?.(sel.map(o => o.value));
@@ -73,13 +88,24 @@ function OptionSelector({
       };
     }
 
+    if (clearable) {
+      return {
+        multiple,
+        clearable,
+        value: selected,
+        onChange: (opt: SelectOption<string> | undefined) => onChange?.(opt?.value),
+        closeOnSelect,
+      };
+    }
+
     return {
       multiple,
+      clearable,
       value: selected,
-      onChange: (opt: any) => onChange?.(opt.value),
+      onChange: (opt: SelectOption<string>) => onChange?.(opt.value),
       closeOnSelect,
     };
-  }, [multiple, selected, onChange, closeOnSelect]);
+  }, [clearable, multiple, selected, onChange, closeOnSelect]);
 
   function isOptionDisabled(option: SelectOptionWithKey<string>) {
     return Boolean(