Permalink
Browse files

Fix TextInput autoGrow

Reviewed By: fkgozali

Differential Revision: D5625698

fbshipit-source-id: 04a649905816a298dd525144e971cf577c41daa5
  • Loading branch information...
ayc1 authored and facebook-github-bot committed Aug 15, 2017
1 parent 68bbccb commit 7abce0b74254cc0328b6a6d8f631231eba364b76
Showing with 21 additions and 16 deletions.
  1. +21 −16 Libraries/Components/TextInput/TextInput.js
@@ -212,6 +212,7 @@ const TextInput = createReactClass({
* If true, will increase the height of the textbox if need be. If false,
* the textbox will become scrollable once the height is reached. The
* default value is false.
* @platform android
*/
autoGrow: PropTypes.bool,
/**
@@ -554,7 +555,7 @@ const TextInput = createReactClass({
mixins: [NativeMethodsMixin, TimerMixin],
getInitialState: function() {
return {nativeHeight: this._originalNativeHeight};
return {layoutHeight: this._layoutHeight};
},
/**
@@ -574,7 +575,7 @@ const TextInput = createReactClass({
_focusSubscription: (undefined: ?Function),
_lastNativeText: (undefined: ?string),
_lastNativeSelection: (undefined: ?Selection),
_originalNativeHeight: (-1: number),
_layoutHeight: (-1: number),
componentDidMount: function() {
this._lastNativeText = this.props.value;
@@ -690,7 +691,6 @@ const TextInput = createReactClass({
children = [children, props.inputView];
}
props.style.unshift(styles.multilineInput);
props.style.push({height: this.state.nativeHeight});
textContainer =
<RCTTextView
ref={this._setNativeRef}
@@ -699,7 +699,7 @@ const TextInput = createReactClass({
onFocus={this._onFocus}
onBlur={this._onBlur}
onChange={this._onChange}
onContentSizeChange={this._onContentSizeChange}
onContentSizeChange={this.props.onContentSizeChange}
onSelectionChange={this._onSelectionChange}
onTextInput={this._onTextInput}
onSelectionChangeShouldSetResponder={emptyFunction.thatReturnsTrue}
@@ -725,7 +725,10 @@ const TextInput = createReactClass({
_renderAndroid: function() {
const props = Object.assign({}, this.props);
props.style = [{height: this.state.nativeHeight}, this.props.style];
props.style = this.props.style;
if (this.state.layoutHeight >= 0) {
props.style = [props.style, {height: this.state.layoutHeight}];
}
props.autoCapitalize =
UIManager.AndroidTextInput.Constants.AutoCapitalizationType[this.props.autoCapitalize];
var children = this.props.children;
@@ -761,7 +764,7 @@ const TextInput = createReactClass({
return (
<TouchableWithoutFeedback
onLayout={this.props.onLayout}
onLayout={this._onLayout}
onPress={this._onPress}
accessible={this.props.accessible}
accessibilityLabel={this.props.accessibilityLabel}
@@ -813,23 +816,25 @@ const TextInput = createReactClass({
},
_onContentSizeChange: function(event: Event) {
const height = event.nativeEvent.contentSize.height;
if (this._originalNativeHeight < 0) {
this._originalNativeHeight = height;
}
let contentHeight = event.nativeEvent.contentSize.height;
if (this.props.autoGrow) {
if (this.props.maxHeight) {
this.setState({nativeHeight:
Math.min(this.props.maxHeight, height)});
} else if (Platform.OS === 'android') {
this.setState({nativeHeight: height});
contentHeight = Math.min(this.props.maxHeight, contentHeight);
}
} else {
this.setState({nativeHeight: this._originalNativeHeight});
this.setState({layoutHeight: Math.max(this._layoutHeight, contentHeight)});
}
this.props.onContentSizeChange && this.props.onContentSizeChange(event);
},
_onLayout: function(event: Event) {
const height = event.nativeEvent.layout.height;
if (height) {
this._layoutHeight = event.nativeEvent.layout.height;
}
this.props.onLayout && this.props.onLayout(event);
},
_onSelectionChange: function(event: Event) {
this.props.onSelectionChange && this.props.onSelectionChange(event);

0 comments on commit 7abce0b

Please sign in to comment.