-
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
TextInput with textAlign='right' inside a ScrollView gets focused on scroll (Android only) #12167
Comments
That's weird. Are you starting the scroll by tapping the textinput? Oh, and thank you for trying it man! |
Yes, this is a blank project. I'm starting outside of the TextInput. If you tap the text input then it should be focused, so I think this might not be an issue. |
Ah-ha, there it is!
Thank you anyway :) |
You're right, I tried and saw the problem. The |
I have the same problem on react-native 0.45.1 |
+1 |
+1 |
+1 |
@pecopeco |
@pecopeco works but NOT on keyboardType={"numeric"} |
+1 |
@pecopeco: thanks for the workaround. We can't use multiline though. Any idea for a workaround w/o multilines? |
+1 |
+1 Anyone willing to help? |
I solved this issue by installing a PanResponder:
Then on your main view:
|
@pecopeco Thanks mate that worked like a charm. Weird issue really. |
For the record, The TextInput component is rendered inside of a You might also be able to subclass TextInput, override the render method, and remove the Touchable wrapper. |
same issue for me, my textInput is numeric and i don't want a multiLine textinput |
@mobitar could you write example please? |
same problem, has some solution ? |
any solution?! |
@derakhshanfar did you have resolved this problem? |
+1 |
not fixed yet! |
I tried all the best way that solved my problem |
Thank you so much, you help me resolve my question. |
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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions. |
Is there any fix for this issue? |
it's about three years and this issue still exist |
I have the same issue, it's 2020 and there is no working solution.. so sad! |
I had an issue in textinput. textAlign propery was given as center and when I'm clearing my input completely the cursor will be at the right end. |
I can not reproduce on react-native master. Can you provide a reproducible example or provide explanation of import React, { Component } from "react";
import { ScrollView, TextInput, View, Text, StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<ScrollView>
<TextInput
onFocus={() => console.warn("onFocus")}
style={{
textAlign: 'right',
backgroundColor: 'yellow',
}} />
<View style={{ height: 2000 }} />
</ScrollView>
);
}
}
const styles = StyleSheet.create({
}); this is the output. You will see console.warn("onFocus") when I tap on TextInput. Same behaviour without textAlign. It is what I expect with |
try this try to scroll page while first touch is on textinput. excepted behavior is page scroll without focus on textinput |
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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions. |
Issue still exist |
is there any solution |
Builds a basic QR-screen which has the simple functionality to scan QR-codes of a student-ID and send a companyConnection - request. Next step is to add a 1-5 rating framework and also implement a QR-code for the students. Additional fixes: Solves problem in profileScreen where ScrollView wouldn't scroll when dragging on a <TextInput> which has style textAlign: 'center'. Solved by adding the attribute numberoflines={1} to the <TextInput>. More on the issue: facebook/react-native#12167
This solution solves the problem, but it makes it impossible for the user to move the cursor through the text or select it, it is still more practical to use, I did this improvisation but the experience is still not good: import React, { forwardRef, useState, useRef, useImperativeHandle } from "react";
import {
Text,
StyleSheet,
TouchableOpacity,
TextStyle,
TextInput as TextInputComponent,
TextInputProps as TextInputComponentProps
} from "react-native";
export type TextInputProps = TextInputComponentProps & {};
export type TextInputRef = TextInputComponent & {};
const TextInput = (
{
style,
multiline,
placeholder,
value,
placeholderTextColor,
textAlign: textAlignProp,
...rest
}: TextInputProps,
ref: any
) => {
const inputRef = useRef<TextInputComponent>(null);
const [widthPlaceholder, setWidthPlaceholder] = useState(0);
let {
textAlign,
fontFamily,
fontSize,
fontStyle,
fontWeight,
textTransform,
lineHeight,
textAlignVertical,
color,
...containerStyle
} = StyleSheet.flatten(style);
let textStyle: TextStyle = {
fontFamily,
fontSize,
fontStyle,
fontWeight,
textTransform,
lineHeight,
color
};
textAlign = textAlign || textAlignProp;
if (!multiline) {
switch (textAlign) {
case 'center':
containerStyle.alignItems = 'center';
break;
case 'right':
containerStyle.alignItems = 'flex-end';
break;
}
} else {
textStyle = { ...textStyle, textAlign, width: '100%' };
}
switch (textAlignVertical) {
case 'top':
containerStyle.justifyContent = 'flex-start';
break;
case 'bottom':
containerStyle.justifyContent = 'flex-end';
break;
case 'center':
default:
containerStyle.justifyContent = 'center';
break;
}
useImperativeHandle(ref, () => inputRef.current);
return (
<TouchableOpacity
style={
[
styles.container,
containerStyle
]
}
activeOpacity={1}
onPress={() => {
inputRef.current?.blur();
inputRef.current?.focus();
}}
>
{
!value && <Text
numberOfLines={1}
style={
[
styles.placeholder,
textStyle,
{ color: placeholderTextColor || color }
]
}
onLayout={
({ nativeEvent }) =>
setWidthPlaceholder(nativeEvent.layout.width)
}
>
{placeholder}
</Text>
}
<TextInputComponent
{...rest}
ref={inputRef}
value={value}
multiline={multiline}
placeholderTextColor="transparent"
placeholder={multiline ? placeholder : undefined}
style={
[
styles.input,
textStyle,
{
width: value ? undefined : widthPlaceholder,
color: value ? color : 'transparent'
}
]
}
/>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
input: {
minWidth: 2,
maxWidth: '100%'
},
placeholder: {
maxWidth: '100%',
position: 'absolute'
},
container: {
justifyContent: 'center'
}
});
export default forwardRef<
TextInputRef,
TextInputProps
>(TextInput); |
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
A |
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
This issue was closed because it has been stalled for 7 days with no activity. |
please reopon this |
Description
Hello there,
I've found a small issue on Android.
When a
TextInput
with hastextAlign: 'right'
inside aScrollView
and you press on it for scrolling it will focus instead (only on Android).The correct behaviour would be to get focused only if you tap on it (without scrolling).
It works perfectly on iOS or if you remove the
textAlign
style.EDIT: I'm having the same issue with
textAlign: 'center'
.Works correctly with every other prop (
left
,justify
,auto
).Reproduction
You can test it easily:
Additional Information
The text was updated successfully, but these errors were encountered: