Textinput includes touchableopacity which supersedes parent onpress actions

[mjfiandaca]

🐛 Bug Report

When a textinput component is included as a child of touchableopacity, it supersedes the parent's touchableopacity onpress.

In some cases, we want to change the display of a textinput's parent when the textinput is pressed; this goes beyond using onfocus as if the textinput already has focus, the onfocus is correctly not invoked.

As a side note, if I have nested TouchableOpacity elements, even if the child element with TouchableOpacity does not have an onPress, it also supersedes the parent's onPress. Just something interesting to note.

To Reproduce

Nest a textinput component within a touchableopacity component.
The OnPress of the touchableopacity is never called.
In inspecting the TextInput element, this is caused by the fact that textinput is always wrapped in its own TouchableOpacity with OnPress logic. From what I can tell, this logic is necessary to update the onfocus of the textinput.

Note, this issue was previously reported with https://github.com/facebook/react-native/issues/14958 but that item was closed as stale.

Expected Behavior

Ideally, an OnPress could be added to the textinput component to be invoked prior (or after) setting the onfocus event (of course, with code added above this to pass in the onPress prop as well):

TextInput.js

 _onPress: function(event: Event) {
    if (this.props.editable || this.props.editable === undefined) {
      if (this.props.onPress) {
        this.props.onPress(event);
      }
      this.focus();
    }
  },

Code Example

<TouchableOpacity
            key={item.itemDisplay}
            onPress={() => onRecipientSelect(index)}
          >
            <TextInput
              value={item.itemDisplay}
              style={
                index === selectedRecipient
                  ? styles.chipSelectedStyle
                  : styles.chipStyle
              }
               caretHidden={true}
              spellCheck={false}
              autoCorrect={false}
              onChangeText={onChangeText}
             />
          </TouchableOpacity>

Environment

React Native Environment Info:

    System:
      OS: Windows 10
      CPU: (4) x64 Intel(R) Pentium(R) CPU G4560T @ 2.90GHz
      Memory: 2.03 GB / 7.43 GB
    Binaries:
      Yarn: 1.10.1 - C:\Users\mjfiandaca\AppData\Roaming\npm\yarn.CMD
      npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.3.0.0 AI-182.5107.16.33.5264788
React-native version:  0.57.8

[CatapultJesse]

Snack reproducing: https://snack.expo.io/@jkcooper/rn-issue-#23720---text-input-touchable-opacity
I don't think the touch event should necessarily bubble out of the TextInput, but there should probably be a way to fire an event on each press of a text input, not just the focus.

[dulmandakh]

Hello there 👋 this issue seems more of a precise feature request than a bug report. For this reason, we'd prefer for you to post it to Canny so that it can be prioritized against the FR already there (maybe someone already submitted it!).