ref(core): improve Select typings by TkDodo · Pull Request #110641 · getsentry/sentry

TkDodo · 2026-03-13T15:46:41Z

The Select component typings were somehow flawed and turn every prop into any, making quite a mess on each call-side because not a single prop on select was properly type-checked.

This PR fixes the select type issues, and in turn revealed over 100 issues on usages. I’ve tried to keep most changes type-only, and I’ll note where we have runtime specific changes in comments.

Most runtime specific changes are about removing props passed to Select that don’t exist and therefore don’t do anything. In many cases, we passed props that are usually passed to a FormField directly to Select.

For some things I’ve just fallen back to as any to not affect anything, which is an okay trade-off because this PR will make all future usages of Select properly typed.

# Conflicts: # static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx

# Conflicts: # static/app/components/teamSelector.spec.tsx # static/app/utils/convertFromSelect2Choices.tsx

… use it

TkDodo · 2026-03-13T15:47:41Z

static/app/components/core/select/select.tsx

+      /**
+       * Unlike react-select which expects an OptionType as its value
+       * we accept the option.value and resolve the option object.
+       * Because this type is embedded in the OptionType generic we
+       * can't have a good type here.
+       */
+      value?: any;


I’ll tackle this in a follow-up

TkDodo · 2026-03-13T15:48:30Z

static/app/components/core/select/select.tsx

+  // todo(tkdodo): typing `p` and keeping `any` localized avoids leaking it
+  const props = p as any;


at least this confines the blast radius of any to the inside of this component. It’s an even bigger mess to clean up internally, and I doubt we’ll see it happen. I’d rather throw the select away and do a new one.

TkDodo · 2026-03-13T15:50:09Z

static/app/components/forms/controls/reactSelectWrapper.tsx

 export type {
-  Props,
-  NamedProps,
+  NamedProps as Props,


building on top of NamedProps instead of Props is what enables the type-safety, because for some reason, Props is just NamedProps intersected with:

export type SelectComponentsProps = { [key in string]: any };

🤷‍♂️

TkDodo · 2026-03-13T16:25:53Z

static/app/components/modals/inviteMembersModal/inviteRowControl.tsx

          }}
          options={mapToOptions(emails)}
-          onBlur={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onBlur={(e: any) => {


event is a FocusEvent but somehow we expect a ChangeEvent here 🤷

TkDodo · 2026-03-13T16:26:19Z

static/app/components/modals/inviteMissingMembersModal/index.tsx

                isInsideModal
              />
              <TeamSelector
-                organization={organization}


TeamSelector doesn’t accept organization as a prop - it calls useOrganization() internally.

TkDodo · 2026-03-13T16:38:38Z

static/app/views/alerts/rules/metric/thresholdTypeForm.tsx

-            onChange={({value}: any) => onComparisonDeltaChange(value)}
+            onChange={({value}) => onComparisonDeltaChange(value)}
            options={comparisonDeltaOptions}
-            required={comparisonType === AlertRuleComparisonType.CHANGE}


required does nothing (I checked)

TkDodo · 2026-03-13T16:41:11Z

static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx

-          options={Object.keys(sortDirections).map(value => ({
-            // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-            label: sortDirections[value],
-            value,
+          options={Object.entries(sortDirections).map(([value, label]) => ({
+            value: value as SortDirection,
+            label,


using Object.entries over Object.keys to avoid the indexed access. value is still a string here so it needs a type assertion.

TkDodo · 2026-03-13T16:42:31Z

static/app/views/performance/transactionSummary/transactionThresholdModal.tsx

        >
          <Select
-            required
-            options={METRIC_CHOICES.slice()}


not sure why we made a shallow copy of an object here? I sure don’t hope that the component mutates them, but I’ve inlined nonetheless

TkDodo · 2026-03-13T16:45:26Z

static/gsApp/views/seerAutomation/onboarding/repositoryToProjectConfiguration.tsx

        options={repositories}
        noOptionsMessage={() => t('No repositories found')}
        menuPortalTarget={document.body}
-        prefix={<IconRepository size="sm" />}


There is no prefix on Select. Maybe this used to be a compactSelect at some point?

TkDodo · 2026-03-13T16:45:55Z

static/app/views/alerts/rules/metric/wizardField.tsx

              value={selectedTemplate}
              options={menuOptions}
              disabled={disabled}
-              disabledReason={disabledReason}


another form field level prop, not on Select

static/app/utils/convertFromSelect2Choices.tsx

…rameter

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix prepared fixes for both issues found in the latest run.

✅ Fixed: New onChange type omits null for clearable selects
- Updated SingleProps.onChange type to accept OptionType | null to handle react-select passing null when clearable selects are cleared.
✅ Fixed: AsyncProps reintroduces explicitly omitted props in ControlProps
- Applied Omit to AsyncProps and CreatableProps to prevent reintroduction of onChange, value, menuPlacement, and theme props that were explicitly excluded.

Or push these changes by commenting:

@cursor push a33eba44ab

Preview (a33eba44ab)

diff --git a/static/app/components/core/select/select.tsx b/static/app/components/core/select/select.tsx
--- a/static/app/components/core/select/select.tsx
+++ b/static/app/components/core/select/select.tsx
@@ -409,7 +409,7 @@
 
 type SingleProps<OptionType extends OptionTypeBase> = {
   multiple?: false;
-  onChange?: (option: OptionType) => void;
+  onChange?: (option: OptionType | null) => void;
 };
 
 type SelectProps<OptionType extends OptionTypeBase> =
@@ -418,8 +418,8 @@
 
 export type ControlProps<OptionType extends OptionTypeBase = GeneralSelectValue> =
   SelectProps<OptionType> &
-    AsyncProps<OptionType> &
-    CreatableProps<OptionType, boolean> &
+    Omit<AsyncProps<OptionType>, 'onChange' | 'value' | 'menuPlacement' | 'theme'> &
+    Omit<CreatableProps<OptionType, boolean>, 'onChange' | 'value' | 'menuPlacement' | 'theme'> &
     Omit<
       ReactSelectProps<OptionType, boolean>,
       'onChange' | 'value' | 'menuPlacement' | 'theme'

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

static/app/components/core/select/select.tsx

JonasBa

A disturbing amount of type issues that we weren't aware of... Having functional types is going to improve the DX by a lot. Judging by usage, I wouldn't be surprised if folks were previously just adding props to see what works 😅

The Select component typings were somehow flawed and turn every prop into `any`, making quite a mess on each call-side because not a single prop on select was properly type-checked. This PR fixes the select type issues, and in turn revealed over 100 issues on usages. I’ve tried to keep most changes type-only, and I’ll note where we have runtime specific changes in comments. Most runtime specific changes are about _removing_ props passed to `Select` that don’t exist and therefore don’t do anything. In many cases, we passed props that are usually passed to a `FormField` directly to Select. For some things I’ve just fallen back to `as any` to not affect anything, which is an okay trade-off because this PR will make all future usages of `Select` properly typed.

TkDodo added 12 commits March 12, 2026 14:25

ref: build Select on top of NamedProps

567d0d6

typing refs is hard

6fd753b

fix: type onChange based on multiple

9bd5a6d

more type fixes

5b888bd

more fixes

75a5094

fix: TeamSelector spec

525ece1

widen label to ReactNode

6d86016

Merge branch 'master' into tkdodo/ref/improve-select-types

4ec7aa9

# Conflicts: # static/app/views/dashboards/widgetBuilder/components/sortBySelectors.tsx

Merge branch 'master' into tkdodo/ref/improve-select-types

98ac07b

# Conflicts: # static/app/components/teamSelector.spec.tsx # static/app/utils/convertFromSelect2Choices.tsx

meh, as any

550009e

down to 1

f24c2a1

fix: default to boolean for IsMulti in rect-select as we don't really…

060273b

… use it

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 13, 2026

TkDodo commented Mar 13, 2026

View reviewed changes

TkDodo added 2 commits March 13, 2026 17:46

ref: cleanup

6a8918a

Merge branch 'master' into tkdodo/ref/improve-select-types

6060f5e

vercel bot deployed to Preview March 13, 2026 16:51 View deployment

TkDodo marked this pull request as ready for review March 13, 2026 18:52

TkDodo requested review from a team as code owners March 13, 2026 18:52

cursor bot reviewed Mar 13, 2026

View reviewed changes

static/app/utils/convertFromSelect2Choices.tsx Outdated Show resolved Hide resolved

TkDodo added 2 commits March 16, 2026 09:02

ref(convertFromSelect2Choices): simplify type handling for choices pa…

caaa662

…rameter

Merge branch 'master' into tkdodo/ref/improve-select-types

4bbfb6a

vercel bot deployed to Preview March 16, 2026 08:06 View deployment

cursor bot reviewed Mar 16, 2026

View reviewed changes

static/app/components/core/select/select.tsx Show resolved Hide resolved

static/app/components/core/select/select.tsx Show resolved Hide resolved

types: clearable single select passes null to onChange

15a9a52

vercel bot deployed to Preview March 16, 2026 08:26 View deployment

JonasBa approved these changes Mar 17, 2026

View reviewed changes

TkDodo merged commit 8fd1c6d into master Mar 18, 2026
63 checks passed

TkDodo deleted the tkdodo/ref/improve-select-types branch March 18, 2026 08:58

		// todo(tkdodo): typing `p` and keeping `any` localized avoids leaking it
		const props = p as any;

Uh oh!

Conversation

TkDodo commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

JonasBa left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

TkDodo commented Mar 13, 2026 •

edited

Loading

cursor bot left a comment •

edited

Loading

JonasBa left a comment •

edited

Loading