From 41f74ee8f424eea98b7dcc04fc6319dd02c47487 Mon Sep 17 00:00:00 2001 From: TkDodo Date: Wed, 19 Nov 2025 14:32:23 +0100 Subject: [PATCH] ref: do not allow uncontrolled compactSelect --- .../app/components/core/compactSelect/compactSelect.tsx | 5 +---- .../app/components/core/compactSelect/composite.spec.tsx | 8 ++++---- static/app/components/core/compactSelect/composite.tsx | 5 +---- static/app/components/core/compactSelect/control.tsx | 9 +++++---- static/app/components/core/compactSelect/list.tsx | 8 -------- static/gsApp/views/subscriptionPage/usageLog.tsx | 2 +- 6 files changed, 12 insertions(+), 25 deletions(-) diff --git a/static/app/components/core/compactSelect/compactSelect.tsx b/static/app/components/core/compactSelect/compactSelect.tsx index 0bbdd7d117ecd6..93e167f8aedae0 100644 --- a/static/app/components/core/compactSelect/compactSelect.tsx +++ b/static/app/components/core/compactSelect/compactSelect.tsx @@ -60,7 +60,6 @@ export function CompactSelect({ // List props options, value, - defaultValue, onChange, onSectionToggle, multiple, @@ -87,7 +86,6 @@ export function CompactSelect({ return { multiple, value, - defaultValue, onChange, closeOnSelect, grid, @@ -96,12 +94,11 @@ export function CompactSelect({ return { multiple, value, - defaultValue, onChange, closeOnSelect, grid, }; - }, [multiple, value, defaultValue, onChange, closeOnSelect, grid]); + }, [multiple, value, onChange, closeOnSelect, grid]); const itemsWithKey = useMemo(() => getItemsWithKeys(options), [options]); diff --git a/static/app/components/core/compactSelect/composite.spec.tsx b/static/app/components/core/compactSelect/composite.spec.tsx index e6b64f12bcf9fb..13e98c4b002eda 100644 --- a/static/app/components/core/compactSelect/composite.spec.tsx +++ b/static/app/components/core/compactSelect/composite.spec.tsx @@ -8,7 +8,7 @@ describe('CompactSelect', () => { {}} options={[ {value: 'choice_one', label: 'Choice One'}, @@ -18,7 +18,7 @@ describe('CompactSelect', () => { {}} options={[ {value: 'choice_three', label: 'Choice Three'}, @@ -252,7 +252,7 @@ describe('CompactSelect', () => { {}} options={[ {value: 'choice_one', label: 'Choice One'}, @@ -317,7 +317,7 @@ describe('CompactSelect', () => { = CompositeSelectRegion & { function Region({ options, value, - defaultValue, onChange, multiple, disallowEmptySelection, @@ -151,7 +150,6 @@ function Region({ return { multiple, value, - defaultValue, closeOnSelect, onChange, }; @@ -159,11 +157,10 @@ function Region({ return { multiple, value, - defaultValue, closeOnSelect, onChange, }; - }, [multiple, value, defaultValue, onChange, closeOnSelect]); + }, [multiple, value, onChange, closeOnSelect]); const itemsWithKey = useMemo(() => getItemsWithKeys(options), [options]); diff --git a/static/app/components/core/compactSelect/control.tsx b/static/app/components/core/compactSelect/control.tsx index c27a28e2f3ffdc..f93ade5a1ce569 100644 --- a/static/app/components/core/compactSelect/control.tsx +++ b/static/app/components/core/compactSelect/control.tsx @@ -88,10 +88,11 @@ export interface ControlProps extends Omit< React.BaseHTMLAttributes, // omit keys from SingleListProps because those will be passed to instead - keyof Omit< - SingleListProps, - 'children' | 'items' | 'grid' | 'compositeIndex' | 'label' - > + | keyof Omit< + SingleListProps, + 'children' | 'items' | 'grid' | 'compositeIndex' | 'label' + > + | 'defaultValue' >, Pick< UseOverlayProps, diff --git a/static/app/components/core/compactSelect/list.tsx b/static/app/components/core/compactSelect/list.tsx index 6eca0cd4042892..6ed81123892711 100644 --- a/static/app/components/core/compactSelect/list.tsx +++ b/static/app/components/core/compactSelect/list.tsx @@ -105,7 +105,6 @@ export interface SingleListProps extends BaseListProps< * that receives the newly selected option and returns whether to close the menu. */ closeOnSelect?: boolean | ((selectedOption: SelectOption) => boolean); - defaultValue?: Value; multiple?: false; onChange?: (selectedOption: SelectOption) => void; value?: Value; @@ -118,7 +117,6 @@ export interface MultipleListProps extends BaseListProp * that receives the newly selected options and returns whether to close the menu. */ closeOnSelect?: boolean | ((selectedOptions: Array>) => boolean); - defaultValue?: Value[]; onChange?: (selectedOptions: Array>) => void; value?: Value[]; } @@ -133,7 +131,6 @@ export interface MultipleListProps extends BaseListProp function List({ items, value, - defaultValue, onChange, grid, multiple, @@ -170,7 +167,6 @@ function List({ disabledKeys, // react-aria turns all keys into strings selectedKeys: value?.map(getEscapedKey), - defaultSelectedKeys: defaultValue?.map(getEscapedKey), disallowEmptySelection, allowDuplicateSelectionEvents: true, onSelectionChange: selection => { @@ -196,9 +192,6 @@ function List({ disabledKeys, // react-aria turns all keys into strings selectedKeys: defined(value) ? [getEscapedKey(value)] : undefined, - defaultSelectedKeys: defined(defaultValue) - ? [getEscapedKey(defaultValue)] - : undefined, disallowEmptySelection: disallowEmptySelection ?? true, allowDuplicateSelectionEvents: true, onSelectionChange: selection => { @@ -221,7 +214,6 @@ function List({ }; }, [ value, - defaultValue, onChange, items, isOptionDisabled, diff --git a/static/gsApp/views/subscriptionPage/usageLog.tsx b/static/gsApp/views/subscriptionPage/usageLog.tsx index e39c5b135eae5d..6f2ee0f4c45d32 100644 --- a/static/gsApp/views/subscriptionPage/usageLog.tsx +++ b/static/gsApp/views/subscriptionPage/usageLog.tsx @@ -165,7 +165,7 @@ function UsageLog({location, subscription}: Props) { clearable menuTitle={t('Subscription Actions')} options={eventNameOptions} - defaultValue={selectedEventName} + value={selectedEventName} onClear={() => handleEventFilter(null)} onChange={option => { handleEventFilter(option.value);