[fix] TextInput keyPress events when child of Touchable

Fix #612

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>;
 

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
+  }
+});

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);