TextInput box with Limited height doesn't focus to end of line after input exceeds height (RN 47.1, 45.1)

[gavin-gmlab]

Is this a bug report?

YES

Have you read the Contributing Guidelines?

YES

Environment

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.47.1
2. node -v:
   v7.10.1
3. npm -v:
   4.2.0
4. yarn --version:

Then, specify:

• Target Platform:
  iOS, Android - Problem only reproducable on Android right now.

• Development Operating System: MacOS 10.12,

• Build tools: Android Studio 2.3.3

Steps to Reproduce

1. Create a new project with create-react-native-app AwesomeProject
2. Change the code in App.js to the following (apologies for the styling)

`
import React from 'react';
import { StyleSheet, Text, View, TextInput, Platform } from 'react-native';

export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
value: '',
height: 20
}
this.onContentSizeChange = this.onContentSizeChange.bind(this)
}
onContentSizeChange(e) {
const contentSize = e.nativeEvent.contentSize
this.setState({height: contentSize.height > 100 ? 100 : contentSize.height})
console.log(this.state.height)
}

render() {
return (


Open up App.js to start working on your app!
Changes you make will automatically reload.
Shake your phone to open the developer menu.

<TextInput
placeholder = 'type your text here'
multiline = {true}
style = {[styles.textInput,{height: this.state.height, width: 200}]}
value = {this.state.text}
onContentSizeChange={(e)=> this.onContentSizeChange(e)}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop: 40,
paddingHorizontal: 10
},
textInput: {
marginLeft: 10,
fontSize: 16,
lineHeight: 18,
marginTop: Platform.select({
ios: 6,
android: 0,
}),
marginBottom: Platform.select({
ios: 5,
android: 3,
}),
},
});
`

3. Run the app and start typing in the text input box until the whole text input box is filled and keep going. Past that point you can't see what you are typing any more.
4. This behaviour happens even if we replace the height with a static value (eg. 100) instead of this.state.height

Expected Behavior

The focus of the text input should remain at the last character input.

Actual Behavior

Focus of the text input is outside the visible area

Reproducible Demo

See the example code listed above.

[gavin-gmlab]

No one else facing this problem?

[allpwrfulroot]

Seeing something potentially related, I'm getting a weird onContentSizeChange event: the multiline TextInput's contentSize decides to increase as if it needs a new line, when the text has actually only reached ~60% of the width of a line. So my TextInput grows at very odd points and too much.

[gavin-gmlab]

@allpwrfulroot, there was a bug reported about that and was supposedly fixed for 47.2. I'm seeing this problem only on Android btw and only if I limit the expanding input field to x lines by the code above. If I let the input box keep growing, no problem

[jamesreggio]

I'm seeing this on Android, too.

[jamesreggio]

Actually, duplicate of #12799.

[gavin-gmlab]

@jamesreggio Yes, didn't see that before I submitted, even though I went through the TextInput issues before I submitted this one. So I'm not alone... So it's been broken for most of the 40+ versions of RN and hasn't been fixed...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[shergin]

Duplicate of #12799.
And, I hope, 0bef872 fixes that.