Skip to content

Commit c8cfaa3

Browse files
sbs44sbs44
committed
feat(feedback): add autoCorrect and spellCheck config
- Add optional autoCorrect and spellCheck props to FeedbackGeneralConfiguration - Pass props through to all three TextInput elements (default: true) - Add autoCapitalize="none" to email input to prevent iOS capitalization - Add tests for prop forwarding, defaults, and email autoCapitalize
1 parent b1579bc commit c8cfaa3

File tree

6 files changed

+152
-0
lines changed

6 files changed

+152
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@
66
> make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first.
77
<!-- prettier-ignore-end -->
88
9+
## Unreleased
10+
11+
### Features
12+
13+
- Add `autoCorrect` and `spellCheck` config options to `FeedbackWidget` ([#5627](https://github.com/getsentry/sentry-react-native/pull/5627))
14+
- Add `autoCapitalize="none"` to `FeedbackWidget` email input ([#5627](https://github.com/getsentry/sentry-react-native/pull/5627))
15+
916
## 7.12.0
1017

1118
### Features

‎packages/core/src/js/feedback/FeedbackWidget.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
261261
const imagePickerConfiguration: ImagePickerConfiguration = this.props;
262262
const text: FeedbackTextConfiguration = this.props;
263263
const styles: FeedbackWidgetStyles = { ...defaultStyles(theme), ...this.props.styles };
264+
const autoCorrect = config.autoCorrect !== false;
265+
const spellCheck = config.spellCheck !== false;
264266
const onCancel = (): void => {
265267
if (onFormClose) {
266268
onFormClose();
@@ -310,6 +312,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
310312
placeholder={text.namePlaceholder}
311313
value={name}
312314
onChangeText={value => this.setState({ name: value })}
315+
autoCorrect={false}
316+
spellCheck={false}
313317
/>
314318
</>
315319
)}
@@ -325,6 +329,9 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
325329
testID="sentry-feedback-email-input"
326330
placeholder={text.emailPlaceholder}
327331
keyboardType={'email-address' as KeyboardTypeOptions}
332+
autoCapitalize="none"
333+
autoCorrect={false}
334+
spellCheck={false}
328335
value={email}
329336
onChangeText={value => this.setState({ email: value })}
330337
/>
@@ -342,6 +349,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
342349
value={description}
343350
onChangeText={value => this.setState({ description: value })}
344351
multiline
352+
autoCorrect={autoCorrect}
353+
spellCheck={spellCheck}
345354
/>
346355
{(config.enableScreenshot || imagePickerConfiguration.imagePicker || this._hasScreenshot()) && (
347356
<View style={styles.screenshotContainer}>

‎packages/core/src/js/feedback/FeedbackWidget.types.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,20 @@ export interface FeedbackGeneralConfiguration {
6060
*/
6161
enableTakeScreenshot?: boolean;
6262

63+
/**
64+
* Enable auto-correct for text inputs.
65+
*
66+
* @default true
67+
*/
68+
autoCorrect?: boolean;
69+
70+
/**
71+
* Enable spell check for text inputs.
72+
*
73+
* @default true
74+
*/
75+
spellCheck?: boolean;
76+
6377
/**
6478
* Fill in email/name input fields with Sentry user context if it exists.
6579
* The value of the email/name keys represent the properties of your user context.

‎packages/core/test/feedback/FeedbackWidget.test.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,37 @@ describe('FeedbackWidget', () => {
149149
expect(toJSON()).toMatchSnapshot();
150150
});
151151

152+
it('passes autoCorrect and spellCheck props to message input', () => {
153+
const { getByTestId } = render(
154+
<FeedbackWidget {...defaultProps} autoCorrect={false} spellCheck={false} />,
155+
);
156+
157+
expect(getByTestId('sentry-feedback-message-input').props.autoCorrect).toBe(false);
158+
expect(getByTestId('sentry-feedback-message-input').props.spellCheck).toBe(false);
159+
});
160+
161+
it('defaults autoCorrect and spellCheck to true on message input', () => {
162+
const { getByTestId } = render(<FeedbackWidget {...defaultProps} />);
163+
164+
expect(getByTestId('sentry-feedback-message-input').props.autoCorrect).toBe(true);
165+
expect(getByTestId('sentry-feedback-message-input').props.spellCheck).toBe(true);
166+
});
167+
168+
it('hardcodes autoCorrect and spellCheck to false on name and email inputs', () => {
169+
const { getByTestId } = render(<FeedbackWidget {...defaultProps} />);
170+
171+
expect(getByTestId('sentry-feedback-name-input').props.autoCorrect).toBe(false);
172+
expect(getByTestId('sentry-feedback-name-input').props.spellCheck).toBe(false);
173+
expect(getByTestId('sentry-feedback-email-input').props.autoCorrect).toBe(false);
174+
expect(getByTestId('sentry-feedback-email-input').props.spellCheck).toBe(false);
175+
});
176+
177+
it('sets autoCapitalize to none on email input', () => {
178+
const { getByTestId } = render(<FeedbackWidget {...defaultProps} />);
179+
180+
expect(getByTestId('sentry-feedback-email-input').props.autoCapitalize).toBe('none');
181+
});
182+
152183
it('renders correctly', () => {
153184
const { getByPlaceholderText, getByText, getByTestId, queryByText } = render(<FeedbackWidget {...defaultProps} />);
154185

‎packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,10 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
7373
Name
7474
</Text>
7575
<TextInput
76+
autoCorrect={false}
7677
onChangeText={[Function]}
7778
placeholder="Your Name"
79+
spellCheck={false}
7880
style={
7981
{
8082
"borderColor": "#0000ff",
@@ -97,9 +99,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
9799
Email
98100
</Text>
99101
<TextInput
102+
autoCapitalize="none"
103+
autoCorrect={false}
100104
keyboardType="email-address"
101105
onChangeText={[Function]}
102106
placeholder="your.email@example.org"
107+
spellCheck={false}
103108
style={
104109
{
105110
"borderColor": "#0000ff",
@@ -123,9 +128,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
123128
(required)
124129
</Text>
125130
<TextInput
131+
autoCorrect={true}
126132
multiline={true}
127133
onChangeText={[Function]}
128134
placeholder="What's the bug? What did you expect?"
135+
spellCheck={true}
129136
style={
130137
[
131138
{
@@ -312,8 +319,10 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
312319
Name
313320
</Text>
314321
<TextInput
322+
autoCorrect={false}
315323
onChangeText={[Function]}
316324
placeholder="Your Name"
325+
spellCheck={false}
317326
style={
318327
{
319328
"borderColor": "#0000ff",
@@ -336,9 +345,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
336345
Email
337346
</Text>
338347
<TextInput
348+
autoCapitalize="none"
349+
autoCorrect={false}
339350
keyboardType="email-address"
340351
onChangeText={[Function]}
341352
placeholder="your.email@example.org"
353+
spellCheck={false}
342354
style={
343355
{
344356
"borderColor": "#0000ff",
@@ -362,9 +374,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
362374
(required)
363375
</Text>
364376
<TextInput
377+
autoCorrect={true}
365378
multiline={true}
366379
onChangeText={[Function]}
367380
placeholder="What's the bug? What did you expect?"
381+
spellCheck={true}
368382
style={
369383
[
370384
{
@@ -615,8 +629,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
615629
Name Label
616630
</Text>
617631
<TextInput
632+
autoCorrect={false}
618633
onChangeText={[Function]}
619634
placeholder="Name Placeholder"
635+
spellCheck={false}
620636
style={
621637
{
622638
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -644,9 +660,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
644660
Email Label
645661
</Text>
646662
<TextInput
663+
autoCapitalize="none"
664+
autoCorrect={false}
647665
keyboardType="email-address"
648666
onChangeText={[Function]}
649667
placeholder="Email Placeholder"
668+
spellCheck={false}
650669
style={
651670
{
652671
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -675,9 +694,11 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
675694
(is required label)
676695
</Text>
677696
<TextInput
697+
autoCorrect={true}
678698
multiline={true}
679699
onChangeText={[Function]}
680700
placeholder="Message Placeholder"
701+
spellCheck={true}
681702
style={
682703
[
683704
{
@@ -885,8 +906,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
885906
Name Label
886907
</Text>
887908
<TextInput
909+
autoCorrect={false}
888910
onChangeText={[Function]}
889911
placeholder="Name Placeholder"
912+
spellCheck={false}
890913
style={
891914
{
892915
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -914,9 +937,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
914937
Email Label
915938
</Text>
916939
<TextInput
940+
autoCapitalize="none"
941+
autoCorrect={false}
917942
keyboardType="email-address"
918943
onChangeText={[Function]}
919944
placeholder="Email Placeholder"
945+
spellCheck={false}
920946
style={
921947
{
922948
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -945,9 +971,11 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
945971
(is required label)
946972
</Text>
947973
<TextInput
974+
autoCorrect={true}
948975
multiline={true}
949976
onChangeText={[Function]}
950977
placeholder="Message Placeholder"
978+
spellCheck={true}
951979
style={
952980
[
953981
{
@@ -1218,8 +1246,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
12181246
Name
12191247
</Text>
12201248
<TextInput
1249+
autoCorrect={false}
12211250
onChangeText={[Function]}
12221251
placeholder="Your Name"
1252+
spellCheck={false}
12231253
style={
12241254
{
12251255
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1247,9 +1277,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
12471277
Email
12481278
</Text>
12491279
<TextInput
1280+
autoCapitalize="none"
1281+
autoCorrect={false}
12501282
keyboardType="email-address"
12511283
onChangeText={[Function]}
12521284
placeholder="your.email@example.org"
1285+
spellCheck={false}
12531286
style={
12541287
{
12551288
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1278,9 +1311,11 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
12781311
(required)
12791312
</Text>
12801313
<TextInput
1314+
autoCorrect={true}
12811315
multiline={true}
12821316
onChangeText={[Function]}
12831317
placeholder="What's the bug? What did you expect?"
1318+
spellCheck={true}
12841319
style={
12851320
[
12861321
{
@@ -1488,8 +1523,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
14881523
Name
14891524
</Text>
14901525
<TextInput
1526+
autoCorrect={false}
14911527
onChangeText={[Function]}
14921528
placeholder="Your Name"
1529+
spellCheck={false}
14931530
style={
14941531
{
14951532
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1517,9 +1554,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
15171554
Email
15181555
</Text>
15191556
<TextInput
1557+
autoCapitalize="none"
1558+
autoCorrect={false}
15201559
keyboardType="email-address"
15211560
onChangeText={[Function]}
15221561
placeholder="your.email@example.org"
1562+
spellCheck={false}
15231563
style={
15241564
{
15251565
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1548,9 +1588,11 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
15481588
(required)
15491589
</Text>
15501590
<TextInput
1591+
autoCorrect={true}
15511592
multiline={true}
15521593
onChangeText={[Function]}
15531594
placeholder="What's the bug? What did you expect?"
1595+
spellCheck={true}
15541596
style={
15551597
[
15561598
{

0 commit comments

Comments
 (0)