Textinput includes touchableopacity which supersedes parent onpress actions #23720
Description
🐛 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