[fix] TextInput support for 'returnKeyType'

Close necolas#1413

Co-authored-by: Nicolas Gallagher <nicolasgallagher@gmail.com>

Author: comp615

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

@@ -420,6 +420,12 @@ describe('components/TextInput', () => {
     });
   });
 
+  test('prop "returnKeyType"', () => {
+    const returnKeyType = 'previous';
+    const input = findNativeInput(shallow(<TextInput returnKeyType={returnKeyType} />));
+    expect(input.prop('enterkeyhint')).toEqual(returnKeyType);
+  });
+
   test('prop "secureTextEntry"', () => {
     let input = findNativeInput(shallow(<TextInput secureTextEntry />));
     expect(input.prop('type')).toEqual('password');

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

@@ -108,6 +108,7 @@ class TextInput extends Component<*> {
     onSubmitEditing: func,
     placeholder: string,
     placeholderTextColor: ColorPropType,
+    returnKeyType: oneOf(['enter', 'done', 'go', 'next', 'previous', 'search', 'send']),
     secureTextEntry: bool,
     selectTextOnFocus: bool,
     selection: shape({
@@ -131,7 +132,6 @@ class TextInput extends Component<*> {
     onEndEditing: func,
     onScroll: func,
     returnKeyLabel: string,
-    returnKeyType: string,
     selectionColor: ColorPropType,
     selectionState: any,
     textBreakStrategy: string,
@@ -179,6 +179,7 @@ class TextInput extends Component<*> {
       keyboardType,
       multiline,
       numberOfLines,
+      returnKeyType,
       secureTextEntry,
       /* eslint-disable */
       blurOnSubmit,
@@ -213,7 +214,6 @@ class TextInput extends Component<*> {
       removeClippedSubviews,
       renderToHardwareTextureAndroid,
       returnKeyLabel,
-      returnKeyType,
       scrollEnabled,
       selectionColor,
       selectionState,
@@ -262,6 +262,7 @@ class TextInput extends Component<*> {
       autoCorrect: autoCorrect ? 'on' : 'off',
       classList: [classes.textinput],
       dir: 'auto',
+      enterkeyhint: returnKeyType,
       onBlur: normalizeEventHandler(this._handleBlur),
       onChange: normalizeEventHandler(this._handleChange),
       onFocus: normalizeEventHandler(this._handleFocus),

packages/react-native-web/src/modules/createDOMProps/index.js

@@ -182,6 +182,7 @@ const createDOMProps = (component, props, styleResolver) => {
   if (nativeID && nativeID.constructor === String) {
     domProps.id = nativeID;
   }
+
   // Link security
   // https://mathiasbynens.github.io/rel-noopener/
   // Note: using "noreferrer" doesn't impact referrer tracking for https

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

@@ -279,6 +279,12 @@ nativeEvent: { key: keyValue } }`}</Code>{' '}
         }}
       />
 
+      <DocItem
+        name="returnKeyType"
+        typeInfo="?enum('enter', 'done', 'go', 'next', 'previous', 'search', 'send')"
+        description="Specifies what action label (or icon) to present for the enter key on virtual keyboards. Maps to the enterkeyhint attribute on web."
+      />
+
       <DocItem
         name="secureTextEntry"
         typeInfo="?boolean = false"