Skip to content

feat(feedback): Add autoCorrect and spellCheck config to FeedbackWidget #5627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sbs44 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(feedback): Add autoCorrect and spellCheck config to FeedbackWidget #5627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c8cfaa3
feat(feedback): add autoCorrect and spellCheck config
sbs44 Feb 6, 2026
d42d03e
Merge branch 'main' into feat/feedback-widget-autocorrect-spellcheck
lucas-zimerman Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@

## Unreleased

### Features

- Add `autoCorrect` and `spellCheck` config options to `FeedbackWidget` ([#5627](https://github.com/getsentry/sentry-react-native/pull/5627))
- Add `autoCapitalize="none"` to `FeedbackWidget` email input ([#5627](https://github.com/getsentry/sentry-react-native/pull/5627))

### Fixes

- Deep merge custom `styles` with defaults in `FeedbackWidget` instead of replacing them ([#5625](https://github.com/getsentry/sentry-react-native/pull/5625))
Expand Down
10 changes: 10 additions & 0 deletions packages/core/src/js/feedback/FeedbackWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,8 +260,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
const config: FeedbackGeneralConfiguration = this.props;
const imagePickerConfiguration: ImagePickerConfiguration = this.props;
const text: FeedbackTextConfiguration = this.props;
const styles: FeedbackWidgetStyles = { ...defaultStyles(theme), ...this.props.styles };
const _defaultStyles = defaultStyles(theme);
const _propStyles = this.props.styles || {};
const autoCorrect = config.autoCorrect !== false;
const spellCheck = config.spellCheck !== false;
const styles = (Object.keys(_defaultStyles) as Array<keyof FeedbackWidgetStyles>).reduce<FeedbackWidgetStyles>(
(merged, key) => {
(merged as Record<string, unknown>)[key] = { ...(_defaultStyles[key] as object), ...(_propStyles[key] as object) };
Expand Down Expand Up @@ -318,6 +321,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
placeholder={text.namePlaceholder}
value={name}
onChangeText={value => this.setState({ name: value })}
autoCorrect={false}
spellCheck={false}
/>
</>
)}
Expand All @@ -333,6 +338,9 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
testID="sentry-feedback-email-input"
placeholder={text.emailPlaceholder}
keyboardType={'email-address' as KeyboardTypeOptions}
autoCapitalize="none"
autoCorrect={false}
spellCheck={false}
value={email}
onChangeText={value => this.setState({ email: value })}
/>
Expand All @@ -350,6 +358,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
value={description}
onChangeText={value => this.setState({ description: value })}
multiline
autoCorrect={autoCorrect}
spellCheck={spellCheck}
/>
{(config.enableScreenshot || imagePickerConfiguration.imagePicker || this._hasScreenshot()) && (
<View style={styles.screenshotContainer}>
Expand Down
14 changes: 14 additions & 0 deletions packages/core/src/js/feedback/FeedbackWidget.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,20 @@ export interface FeedbackGeneralConfiguration {
*/
enableTakeScreenshot?: boolean;

/**
* Enable auto-correct for text inputs.
*
* @default true
*/
autoCorrect?: boolean;

/**
* Enable spell check for text inputs.
*
* @default true
*/
spellCheck?: boolean;

/**
* Fill in email/name input fields with Sentry user context if it exists.
* The value of the email/name keys represent the properties of your user context.
Expand Down
29 changes: 29 additions & 0 deletions packages/core/test/feedback/FeedbackWidget.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,35 @@ describe('FeedbackWidget', () => {
expect(toJSON()).toMatchSnapshot();
});

it('passes autoCorrect and spellCheck props to message input', () => {
const { getByTestId } = render(
<FeedbackWidget {...defaultProps} autoCorrect={false} spellCheck={false} />,
);

expect(getByTestId('sentry-feedback-message-input').props.autoCorrect).toBe(false);
expect(getByTestId('sentry-feedback-message-input').props.spellCheck).toBe(false);
});

it('defaults autoCorrect and spellCheck to true on message input', () => {
const { getByTestId } = render(<FeedbackWidget {...defaultProps} />);

expect(getByTestId('sentry-feedback-message-input').props.autoCorrect).toBe(true);
expect(getByTestId('sentry-feedback-message-input').props.spellCheck).toBe(true);
});

it('hardcodes autoCorrect and spellCheck to false on name and email inputs', () => {
const { getByTestId } = render(<FeedbackWidget {...defaultProps} />);

expect(getByTestId('sentry-feedback-name-input').props.autoCorrect).toBe(false);
expect(getByTestId('sentry-feedback-name-input').props.spellCheck).toBe(false);
expect(getByTestId('sentry-feedback-email-input').props.autoCorrect).toBe(false);
expect(getByTestId('sentry-feedback-email-input').props.spellCheck).toBe(false);
});

it('sets autoCapitalize to none on email input', () => {
const { getByTestId } = render(<FeedbackWidget {...defaultProps} />);

expect(getByTestId('sentry-feedback-email-input').props.autoCapitalize).toBe('none');
it('deep merges custom styles with defaults instead of replacing them', () => {
const partialStyles: FeedbackWidgetStyles = {
input: {
Expand Down
42 changes: 42 additions & 0 deletions packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,10 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
Name
</Text>
<TextInput
autoCorrect={false}
onChangeText={[Function]}
placeholder="Your Name"
spellCheck={false}
style={
{
"borderColor": "#0000ff",
Expand Down Expand Up @@ -109,9 +111,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
Email
</Text>
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={[Function]}
placeholder="your.email@example.org"
spellCheck={false}
style={
{
"borderColor": "#0000ff",
Expand Down Expand Up @@ -140,9 +145,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
(required)
</Text>
<TextInput
autoCorrect={true}
multiline={true}
onChangeText={[Function]}
placeholder="What's the bug? What did you expect?"
spellCheck={true}
style={
[
{
Expand Down Expand Up @@ -351,8 +358,10 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
Name
</Text>
<TextInput
autoCorrect={false}
onChangeText={[Function]}
placeholder="Your Name"
spellCheck={false}
style={
{
"borderColor": "#0000ff",
Expand Down Expand Up @@ -380,9 +389,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
Email
</Text>
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={[Function]}
placeholder="your.email@example.org"
spellCheck={false}
style={
{
"borderColor": "#0000ff",
Expand Down Expand Up @@ -411,9 +423,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
(required)
</Text>
<TextInput
autoCorrect={true}
multiline={true}
onChangeText={[Function]}
placeholder="What's the bug? What did you expect?"
spellCheck={true}
style={
[
{
Expand Down Expand Up @@ -685,8 +699,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
Name Label
</Text>
<TextInput
autoCorrect={false}
onChangeText={[Function]}
placeholder="Name Placeholder"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -714,9 +730,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
Email Label
</Text>
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={[Function]}
placeholder="Email Placeholder"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -745,9 +764,11 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
(is required label)
</Text>
<TextInput
autoCorrect={true}
multiline={true}
onChangeText={[Function]}
placeholder="Message Placeholder"
spellCheck={true}
style={
[
{
Expand Down Expand Up @@ -955,8 +976,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
Name Label
</Text>
<TextInput
autoCorrect={false}
onChangeText={[Function]}
placeholder="Name Placeholder"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -984,9 +1007,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
Email Label
</Text>
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={[Function]}
placeholder="Email Placeholder"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -1015,9 +1041,11 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
(is required label)
</Text>
<TextInput
autoCorrect={true}
multiline={true}
onChangeText={[Function]}
placeholder="Message Placeholder"
spellCheck={true}
style={
[
{
Expand Down Expand Up @@ -1288,8 +1316,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
Name
</Text>
<TextInput
autoCorrect={false}
onChangeText={[Function]}
placeholder="Your Name"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -1317,9 +1347,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
Email
</Text>
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={[Function]}
placeholder="your.email@example.org"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -1348,9 +1381,11 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
(required)
</Text>
<TextInput
autoCorrect={true}
multiline={true}
onChangeText={[Function]}
placeholder="What's the bug? What did you expect?"
spellCheck={true}
style={
[
{
Expand Down Expand Up @@ -1558,8 +1593,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
Name
</Text>
<TextInput
autoCorrect={false}
onChangeText={[Function]}
placeholder="Your Name"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -1587,9 +1624,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
Email
</Text>
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={[Function]}
placeholder="your.email@example.org"
spellCheck={false}
style={
{
"borderColor": "rgba(41, 35, 47, 0.13)",
Expand Down Expand Up @@ -1618,9 +1658,11 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
(required)
</Text>
<TextInput
autoCorrect={true}
multiline={true}
onChangeText={[Function]}
placeholder="What's the bug? What did you expect?"
spellCheck={true}
style={
[
{
Expand Down
Loading
Loading