diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js index c043ab86381f..395aa6b889b0 100644 --- a/src/components/Composer/index.android.js +++ b/src/components/Composer/index.android.js @@ -56,8 +56,8 @@ const defaultProps = { start: 0, end: 0, }, + maxLines: undefined, isFullComposerAvailable: false, - maxLines: -1, setIsFullComposerAvailable: () => {}, isComposerFullSize: false, style: null, @@ -102,7 +102,11 @@ class Composer extends React.Component { onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines(this.props, e)} rejectResponderTermination={false} textAlignVertical="center" - maximumNumberOfLines={!this.props.isComposerFullSize ? this.props.maxLines : undefined} + // Setting a really high number here fixes an issue with the `maxNumberOfLines` prop on TextInput, where on Android the text input would collapse to only one line, + // when it should actually expand to the container (https://github.com/Expensify/App/issues/11694#issuecomment-1560520670) + // @Szymon20000 is working on fixing this (android-only) issue in the in the upstream PR (https://github.com/facebook/react-native/pulls?q=is%3Apr+is%3Aopen+maxNumberOfLines) + // TODO: remove this commend once upstream PR is merged + maximumNumberOfLines={this.props.isComposerFullSize ? 1000000 : this.props.maxLines} style={this.state.propStyles} /* eslint-disable-next-line react/jsx-props-no-spreading */ {...this.props} diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js index 3ca2d7edf58a..357a4b187417 100644 --- a/src/components/Composer/index.ios.js +++ b/src/components/Composer/index.ios.js @@ -56,7 +56,7 @@ const defaultProps = { start: 0, end: 0, }, - maxLines: -1, + maxLines: undefined, isFullComposerAvailable: false, setIsFullComposerAvailable: () => {}, isComposerFullSize: false, @@ -103,14 +103,13 @@ class Composer extends React.Component { (this.textInput = el)} onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines(this.props, e)} rejectResponderTermination={false} textAlignVertical="center" smartInsertDelete={false} + maximumNumberOfLines={this.props.isComposerFullSize ? undefined : this.props.maxLines} style={this.state.propStyles} - maximumNumberOfLines={!this.props.isComposerFullSize ? this.props.maxLines : undefined} /* eslint-disable-next-line react/jsx-props-no-spreading */ {...propsToPass} editable={!this.props.isDisabled} diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 30ab83916f38..f1f5dab5bf82 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -214,7 +214,6 @@ class ReportActionCompose extends React.Component { start: isMobileSafari && !this.shouldAutoFocus ? 0 : props.comment.length, end: isMobileSafari && !this.shouldAutoFocus ? 0 : props.comment.length, }, - maxLines: props.isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES, value: props.comment, // If we are on a small width device then don't show last 3 items from conciergePlaceholderOptions @@ -237,7 +236,6 @@ class ReportActionCompose extends React.Component { this.focus(false); }); - this.setMaxLines(); this.updateComment(this.comment); // Shows Popover Menu on Workspace Chat at first sign-in @@ -257,10 +255,6 @@ class ReportActionCompose extends React.Component { this.focus(); } - if (this.props.isComposerFullSize !== prevProps.isComposerFullSize) { - this.setMaxLines(); - } - // Value state does not have the same value as comment props when the comment gets changed from another tab. // In this case, we should synchronize the value between tabs. const shouldSyncComment = prevProps.comment !== this.props.comment && this.state.value !== this.props.comment; @@ -402,17 +396,6 @@ class ReportActionCompose extends React.Component { this.setState({hasExceededMaxCommentLength}); } - /** - * Set the maximum number of lines for the composer - */ - setMaxLines() { - let maxLines = this.props.isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES; - if (this.props.isComposerFullSize) { - maxLines = CONST.COMPOSER.MAX_LINES_FULL; - } - this.setState({maxLines}); - } - // eslint-disable-next-line rulesdir/prefer-early-return setShouldShowSuggestionMenuToFalse() { if (this.state && this.state.shouldShowEmojiSuggestionMenu) { @@ -923,6 +906,7 @@ class ReportActionCompose extends React.Component { const hasExceededMaxCommentLength = this.state.hasExceededMaxCommentLength; const isFullComposerAvailable = this.state.isFullComposerAvailable && !_.isEmpty(this.state.value); const hasReportRecipient = _.isObject(reportRecipient) && !_.isEmpty(reportRecipient); + const maxComposerLines = this.props.isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES; return ( this.updateComment(comment, true)} onKeyPress={this.triggerHotkeyActions} style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]} - maxLines={this.state.maxLines} + maxLines={maxComposerLines} onFocus={() => this.setIsFocused(true)} onBlur={() => { this.setIsFocused(false);