Skip to content

Commit d6d38b6

Browse files
sbs44lucas-zimermanantonis
authored
feat(feedback): Add autoCorrect and spellCheck config to FeedbackWidget (#5627)
* 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 * Fix build issues after merge * Remove duplicate declaration --------- Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com> Co-authored-by: Antonis Lilis <antonis.lilis@gmail.com>
1 parent a483f9f commit d6d38b6

6 files changed

Lines changed: 150 additions & 0 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
99
## Unreleased
1010

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+
1116
### Fixes
1217

1318
- Deep merge custom `styles` with defaults in `FeedbackWidget` instead of replacing them ([#5625](https://github.com/getsentry/sentry-react-native/pull/5625))

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
262262
const text: FeedbackTextConfiguration = this.props;
263263
const _defaultStyles = defaultStyles(theme);
264264
const _propStyles = this.props.styles || {};
265+
const autoCorrect = config.autoCorrect !== false;
266+
const spellCheck = config.spellCheck !== false;
265267
const styles = (Object.keys(_defaultStyles) as Array<keyof FeedbackWidgetStyles>).reduce<FeedbackWidgetStyles>(
266268
(merged, key) => {
267269
(merged as Record<string, unknown>)[key] = { ...(_defaultStyles[key] as object), ...(_propStyles[key] as object) };
@@ -318,6 +320,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
318320
placeholder={text.namePlaceholder}
319321
value={name}
320322
onChangeText={value => this.setState({ name: value })}
323+
autoCorrect={false}
324+
spellCheck={false}
321325
/>
322326
</>
323327
)}
@@ -333,6 +337,9 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
333337
testID="sentry-feedback-email-input"
334338
placeholder={text.emailPlaceholder}
335339
keyboardType={'email-address' as KeyboardTypeOptions}
340+
autoCapitalize="none"
341+
autoCorrect={false}
342+
spellCheck={false}
336343
value={email}
337344
onChangeText={value => this.setState({ email: value })}
338345
/>
@@ -350,6 +357,8 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
350357
value={description}
351358
onChangeText={value => this.setState({ description: value })}
352359
multiline
360+
autoCorrect={autoCorrect}
361+
spellCheck={spellCheck}
353362
/>
354363
{(config.enableScreenshot || imagePickerConfiguration.imagePicker || this._hasScreenshot()) && (
355364
<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('deep merges custom styles with defaults instead of replacing them', () => {
153184
const partialStyles: FeedbackWidgetStyles = {
154185
input: {

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,10 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
8080
Name
8181
</Text>
8282
<TextInput
83+
autoCorrect={false}
8384
onChangeText={[Function]}
8485
placeholder="Your Name"
86+
spellCheck={false}
8587
style={
8688
{
8789
"borderColor": "#0000ff",
@@ -109,9 +111,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
109111
Email
110112
</Text>
111113
<TextInput
114+
autoCapitalize="none"
115+
autoCorrect={false}
112116
keyboardType="email-address"
113117
onChangeText={[Function]}
114118
placeholder="your.email@example.org"
119+
spellCheck={false}
115120
style={
116121
{
117122
"borderColor": "#0000ff",
@@ -140,9 +145,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
140145
(required)
141146
</Text>
142147
<TextInput
148+
autoCorrect={true}
143149
multiline={true}
144150
onChangeText={[Function]}
145151
placeholder="What's the bug? What did you expect?"
152+
spellCheck={true}
146153
style={
147154
[
148155
{
@@ -351,8 +358,10 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
351358
Name
352359
</Text>
353360
<TextInput
361+
autoCorrect={false}
354362
onChangeText={[Function]}
355363
placeholder="Your Name"
364+
spellCheck={false}
356365
style={
357366
{
358367
"borderColor": "#0000ff",
@@ -380,9 +389,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
380389
Email
381390
</Text>
382391
<TextInput
392+
autoCapitalize="none"
393+
autoCorrect={false}
383394
keyboardType="email-address"
384395
onChangeText={[Function]}
385396
placeholder="your.email@example.org"
397+
spellCheck={false}
386398
style={
387399
{
388400
"borderColor": "#0000ff",
@@ -411,9 +423,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
411423
(required)
412424
</Text>
413425
<TextInput
426+
autoCorrect={true}
414427
multiline={true}
415428
onChangeText={[Function]}
416429
placeholder="What's the bug? What did you expect?"
430+
spellCheck={true}
417431
style={
418432
[
419433
{
@@ -685,8 +699,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
685699
Name Label
686700
</Text>
687701
<TextInput
702+
autoCorrect={false}
688703
onChangeText={[Function]}
689704
placeholder="Name Placeholder"
705+
spellCheck={false}
690706
style={
691707
{
692708
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -714,9 +730,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
714730
Email Label
715731
</Text>
716732
<TextInput
733+
autoCapitalize="none"
734+
autoCorrect={false}
717735
keyboardType="email-address"
718736
onChangeText={[Function]}
719737
placeholder="Email Placeholder"
738+
spellCheck={false}
720739
style={
721740
{
722741
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -745,9 +764,11 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
745764
(is required label)
746765
</Text>
747766
<TextInput
767+
autoCorrect={true}
748768
multiline={true}
749769
onChangeText={[Function]}
750770
placeholder="Message Placeholder"
771+
spellCheck={true}
751772
style={
752773
[
753774
{
@@ -955,8 +976,10 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
955976
Name Label
956977
</Text>
957978
<TextInput
979+
autoCorrect={false}
958980
onChangeText={[Function]}
959981
placeholder="Name Placeholder"
982+
spellCheck={false}
960983
style={
961984
{
962985
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -984,9 +1007,12 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
9841007
Email Label
9851008
</Text>
9861009
<TextInput
1010+
autoCapitalize="none"
1011+
autoCorrect={false}
9871012
keyboardType="email-address"
9881013
onChangeText={[Function]}
9891014
placeholder="Email Placeholder"
1015+
spellCheck={false}
9901016
style={
9911017
{
9921018
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1015,9 +1041,11 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
10151041
(is required label)
10161042
</Text>
10171043
<TextInput
1044+
autoCorrect={true}
10181045
multiline={true}
10191046
onChangeText={[Function]}
10201047
placeholder="Message Placeholder"
1048+
spellCheck={true}
10211049
style={
10221050
[
10231051
{
@@ -1288,8 +1316,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
12881316
Name
12891317
</Text>
12901318
<TextInput
1319+
autoCorrect={false}
12911320
onChangeText={[Function]}
12921321
placeholder="Your Name"
1322+
spellCheck={false}
12931323
style={
12941324
{
12951325
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1317,9 +1347,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
13171347
Email
13181348
</Text>
13191349
<TextInput
1350+
autoCapitalize="none"
1351+
autoCorrect={false}
13201352
keyboardType="email-address"
13211353
onChangeText={[Function]}
13221354
placeholder="your.email@example.org"
1355+
spellCheck={false}
13231356
style={
13241357
{
13251358
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1348,9 +1381,11 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
13481381
(required)
13491382
</Text>
13501383
<TextInput
1384+
autoCorrect={true}
13511385
multiline={true}
13521386
onChangeText={[Function]}
13531387
placeholder="What's the bug? What did you expect?"
1388+
spellCheck={true}
13541389
style={
13551390
[
13561391
{
@@ -1558,8 +1593,10 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
15581593
Name
15591594
</Text>
15601595
<TextInput
1596+
autoCorrect={false}
15611597
onChangeText={[Function]}
15621598
placeholder="Your Name"
1599+
spellCheck={false}
15631600
style={
15641601
{
15651602
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1587,9 +1624,12 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
15871624
Email
15881625
</Text>
15891626
<TextInput
1627+
autoCapitalize="none"
1628+
autoCorrect={false}
15901629
keyboardType="email-address"
15911630
onChangeText={[Function]}
15921631
placeholder="your.email@example.org"
1632+
spellCheck={false}
15931633
style={
15941634
{
15951635
"borderColor": "rgba(41, 35, 47, 0.13)",
@@ -1618,9 +1658,11 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
16181658
(required)
16191659
</Text>
16201660
<TextInput
1661+
autoCorrect={true}
16211662
multiline={true}
16221663
onChangeText={[Function]}
16231664
placeholder="What's the bug? What did you expect?"
1665+
spellCheck={true}
16241666
style={
16251667
[
16261668
{

0 commit comments

Comments
 (0)