ref(forms): Convert BooleanField from class to functional component #106493
Conversation
Refactors BooleanField from a class component to a functional component to align with modern React patterns and Sentry's frontend guidelines (no new class components). Changes: - Converted class component to functional component - Removed Component import and class syntax - Made event parameter optional in handleChange to match OnEvent type - Simplified event type handling - Removed redundant coerceValue helper (inlined logic) - Maintained all existing functionality and behavior
github-actions
bot
added
the
Scope: Frontend
![cursor[bot]](https://d.iamgay.cn/https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| <Confirm | ||
| // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message | ||
| renderMessage={() => confirm[(!value).toString()]} | ||
| onConfirm={() => handleChange()} |
There was a problem hiding this comment.
Confirm dialog sets undefined instead of toggled value
High Severity
When the confirm dialog's onConfirm callback triggers handleChange() without an event argument, FormField.getValueFromEvent() receives (newValue, undefined). Since the second argument is undefined, defined(e) returns false, causing value to be extracted as event?.target?.value which evaluates to undefined (because a boolean has no target property). The old code passed handleChange({}), where the empty object made defined({}) return true, correctly using the first argument as the value.
Summary
Refactors
BooleanFieldfrom a class component to a functional component to align with modern React patterns and Sentry's frontend guidelines (no new class components).This component was identified as a stateless class component (no internal state management), making it an ideal candidate for conversion to a functional component.
Changes
Componentimport and class syntaxhandleChangeto matchOnEventtype signatureReact.ChangeEvent|React.FormEvent)coerceValuehelper method (inlined logic)Test plan
static/app/components/forms/fields/accessibility.spec.tsx)