-
Notifications
You must be signed in to change notification settings - Fork 24.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[0.46.1] TextInput wrapt in touchable, will led touchable stop working #14958
Comments
Downgrade to 0.45.1 can fix this issue. |
Can you tell us more about the issue you're reporting? What did you expect and what happened instead? |
Hey @hramos, I have do a sample project refer to this bug. There are 2 screen record here, we can see the TextInput wrapt in touchable is working on 0.45.1. But not working on 0.46.1. Also I have tried it on real device, the test result is same as the emulator. 0.46:
0.45: source code of this demo project: /**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput
} from 'react-native';
export default class testProject extends Component {
state = {
output: 0
}
onPress() {
this.setState({
output: ++this.state.output
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
React Native 0.45.1
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
{`Press ${this.state.output} times`}
</Text>
<TouchableOpacity onPress={() => {
this.onPress()
}}>
<View style={styles.inputContainer}>
<TextInput
editable={false}
style={styles.textInput}
ref={component => this._input = component}
placeholder='Text Input'/>
<View>
<Text>Text</Text>
</View>
<TouchableOpacity
onPress={() => {
this.onPress()
}}
style={styles.button}>
<View >
<Text>Button</Text>
</View>
</TouchableOpacity>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
},
inputContainer: {
flexDirection: 'row',
borderColor: '#555',
borderRadius: 3,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
textInput: {
width: 200,
backgroundColor: '#f99',
height: 40,
marginRight: 10
},
button: {
marginLeft: 10,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9f9',
height: 40
}
});
AppRegistry.registerComponent('testProject', () => testProject); By the way, anyone knows how to make code in github colourful? |
Why is everything wrapped in a TouchableOpacity? |
Generally is unnecessarily warp all in one touchable, but users tap on textInput will be much easier than tap the small icon on side. For example, if there are one drop down picker nested in this touchable, tap on textInput directly shows the picker, and when users select some option called other, Users can instantly input text in that textInput.
From my iPhone
… On 13 Jul 2017, at 17:16, Héctor Ramos ***@***.***> wrote:
Why is everything wrapped in a TouchableOpacity?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
This is a regression. Confirm that downgrading works. This is needed for user's input that is not from keyboard (e.g. date picker) and consistency on style. |
I just upgraded from RN42 to RN46, and having the same error. Touchable with TextInput now doesn't trigger onPress. |
Happens also on 0.46.4 |
A temporary fix that works for me is to wrap the That is:
This is working for me right now on RN 0.47.1. |
Thanks for the fix! this doesn't work with |
@ilonashub I'm having the same issue, did you find a way to solve it? |
@bermann @ilonashub setting pointerEvents to |
But wrapping |
@JLLLinn Hey Jiaxin you are saying that is it possible to open a Picker from a touchable?? |
@hoscarcito Yes, you can use the touchable to trigger open a time picker |
still happening on 0.54.4. @mrtomhoward workaround above still works (thanks!) |
oh @mrtomhoward god bless you 👏👏 |
still happening on 0.55.3, workaround still works @mrtomhoward god bless you! |
Same issue for me also. TextInput not seen inside the text box. Selected test is shown as outside the text box. |
Still happening on RN0.55.4. @mrtomhoward workaround works just fine. |
Still happening on RN 0.56 |
The @mrtomhoward's solution works. Unfortunately, on the Android side, it prevents text fields from being editable (i.e. user can't place the cursor in the middle of a word). |
when would that be solved? WORKAROUND: remove touchable and use textinput onFocus and onBlur |
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions. |
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information. |
Is this a bug report?
Yes
Have you read the Bugs section of the Contributing to React Native Guide?
Yes
Environment
react-native -v
: react-native: 0.46.1node -v
: v8.1.1npm -v
: 5.1.0Then, specify:
Expected Behavior
Actual Behavior
The source code above was working perfectly in 0.45, but after I upgrade to 0.46 is not working. However wrapt Image or Text is working fine.
The text was updated successfully, but these errors were encountered: