From 26bdf44a4c1f796ab3d438e6b60fecb3fb5e6f41 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Thu, 7 Sep 2017 11:40:00 -0700
Subject: [PATCH] [fix] TextInput keyPress events when child of Touchable

Fix #612
---
 .../1-components/TextInput/TextInputScreen.js |  8 ++++
 .../TextInput/examples/TouchableWrapper.js    | 37 +++++++++++++++++++
 src/components/TextInput/index.js             |  3 ++
 3 files changed, 48 insertions(+)
 create mode 100644 docs/storybook/1-components/TextInput/examples/TouchableWrapper.js

diff --git a/docs/storybook/1-components/TextInput/TextInputScreen.js b/docs/storybook/1-components/TextInput/TextInputScreen.js
index ec82edc0..09262ae5 100644
--- a/docs/storybook/1-components/TextInput/TextInputScreen.js
+++ b/docs/storybook/1-components/TextInput/TextInputScreen.js
@@ -18,6 +18,7 @@ import PropSecureTextEntry from './examples/PropSecureTextEntry';
 import PropSelectTextOnFocus from './examples/PropSelectTextOnFocus';
 import TextInputEvents from './examples/TextInputEvents';
 import TextInputRewrite, { TextInputRewriteInvalidCharacters } from './examples/Rewrite';
+import TouchableWrapper from './examples/TouchableWrapper';
 import React from 'react';
 import UIExplorer, {
   AppText,
@@ -362,6 +363,13 @@ nativeEvent: { key: keyValue } }`}</Code>{' '}
           render: () => <TextInputRewriteInvalidCharacters />
         }}
       />
+
+      <DocItem
+        description="Wrapped in a TouchableWithoutFeedback"
+        example={{
+          render: () => <TouchableWrapper />
+        }}
+      />
     </Section>
   </UIExplorer>;
 
diff --git a/docs/storybook/1-components/TextInput/examples/TouchableWrapper.js b/docs/storybook/1-components/TextInput/examples/TouchableWrapper.js
new file mode 100644
index 00000000..63301a8c
--- /dev/null
+++ b/docs/storybook/1-components/TextInput/examples/TouchableWrapper.js
@@ -0,0 +1,37 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { styles as helperStyles } from '../helpers';
+import { StyleSheet, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+export default class TouchableWrapper extends React.Component {
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View style={styles.container}>
+          <TextInput multiline={false} ref={this._setRef} style={helperStyles.textinput} />
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  _handlePress = () => {
+    if (this._input) {
+      this._input.focus();
+    }
+  };
+
+  _setRef = c => {
+    this._input = c;
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 50
+  }
+});
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 40e85268..90e48835 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -301,6 +301,9 @@ class TextInput extends Component {
   };
 
   _handleKeyDown = e => {
+    // prevent key events bubbling (see #612)
+    e.stopPropagation();
+
     // Backspace, Tab, and Cmd+Enter only fire 'keydown' DOM events
     if (e.which === 8 || e.which === 9 || (e.which === 13 && e.metaKey)) {
       this._handleKeyPress(e);