From ebbade3a6f8efdc3d0bbb70462c1612e4712b647 Mon Sep 17 00:00:00 2001
From: Charlie Croom <ccroom@twitter.com>
Date: Wed, 7 Aug 2019 09:23:21 -0700
Subject: [PATCH] [fix] TextInput support for 'returnKeyType'

Close #1413

Co-authored-by: Nicolas Gallagher <nicolasgallagher@gmail.com>
---
 .../src/exports/TextInput/__tests__/index-test.js           | 6 ++++++
 packages/react-native-web/src/exports/TextInput/index.js    | 5 +++--
 .../react-native-web/src/modules/createDOMProps/index.js    | 1 +
 .../storybook/1-components/TextInput/TextInputScreen.js     | 6 ++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 3f6f4d7a..44b5ebac 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/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');
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index 13697f5a..2cb7c403 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/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),
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index 1befcd5c..caf60ea6 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/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
diff --git a/packages/website/storybook/1-components/TextInput/TextInputScreen.js b/packages/website/storybook/1-components/TextInput/TextInputScreen.js
index cd8dfcd9..8f3c7846 100644
--- a/packages/website/storybook/1-components/TextInput/TextInputScreen.js
+++ b/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"