[fix] TextInput support for spellCheck prop

Fix #501

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -350,12 +350,6 @@ describe('components/TextInput', () => {
     // assert.equal(input.node.selectionStart, 0)
   });
 
-  test('prop "value"', () => {
-    const value = 'value';
-    const input = findNativeInput(shallow(<TextInput value={value} />));
-    expect(input.prop('value')).toEqual(value);
-  });
-
   describe('prop "selection"', () => {
     test('set cursor location', () => {
       const cursorLocation = { start: 3, end: 3 };
@@ -374,4 +368,21 @@ describe('components/TextInput', () => {
       expect(inputCustomSelection.instance().selectionEnd).toEqual(cursorLocation.end);
     });
   });
+
+  test('prop "spellCheck"', () => {
+    // default (inherets from autoCorrect)
+    let input = findNativeInput(shallow(<TextInput />));
+    expect(input.prop('spellCheck')).toEqual(true);
+    input = findNativeInput(shallow(<TextInput autoCorrect={false} />));
+    expect(input.prop('spellCheck')).toEqual(false);
+    // false
+    input = findNativeInput(shallow(<TextInput spellCheck={false} />));
+    expect(input.prop('spellCheck')).toEqual(false);
+  });
+
+  test('prop "value"', () => {
+    const value = 'value';
+    const input = findNativeInput(shallow(<TextInput value={value} />));
+    expect(input.prop('value')).toEqual(value);
+  });
 });

packages/react-native-web/src/exports/TextInput/index.js

@@ -110,6 +110,7 @@ class TextInput extends Component<*> {
       start: number.isRequired,
       end: number
     }),
+    spellCheck: bool,
     style: StyleSheetPropType(TextInputStylePropTypes),
     value: string,
     /* react-native compat */
@@ -130,7 +131,6 @@ class TextInput extends Component<*> {
     returnKeyType: string,
     selectionColor: ColorPropType,
     selectionState: any,
-    spellCheck: bool,
     textBreakStrategy: string,
     underlineColorAndroid: ColorPropType
     /* eslint-enable */
@@ -185,6 +185,7 @@ class TextInput extends Component<*> {
       onSubmitEditing,
       selection,
       selectTextOnFocus,
+      spellCheck,
       /* react-native compat */
       caretHidden,
       clearButtonMode,
@@ -202,7 +203,6 @@ class TextInput extends Component<*> {
       returnKeyType,
       selectionColor,
       selectionState,
-      spellCheck,
       textBreakStrategy,
       underlineColorAndroid,
       /* eslint-enable */
@@ -250,6 +250,7 @@ class TextInput extends Component<*> {
       onSelect: normalizeEventHandler(this._handleSelectionChange),
       readOnly: !editable,
       ref: this._setNode,
+      spellCheck: spellCheck != null ? spellCheck : autoCorrect,
       style: [styles.initial, style]
     });
 

website/storybook/1-components/TextInput/TextInputScreen.js

@@ -95,7 +95,7 @@ const TextInputScreen = () => (
       <DocItem
         name="autoCorrect"
         typeInfo="?boolean = true"
-        description="Automatically correct spelling mistakes (only available in iOS Safari)."
+        description="Automatically correct spelling mistakes. (Only available in iOS Safari.)"
       />
 
       <DocItem
@@ -286,6 +286,12 @@ nativeEvent: { key: keyValue } }`}</Code>{' '}
         }}
       />
 
+      <DocItem
+        name="spellCheck"
+        typeInfo="?boolean"
+        description="If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect. (Only available in supporting browsers)."
+      />
+
       <DocItem
         name="style"
         typeInfo="?style"