Fix for: Editing workspace name to 1to3 characters adding extra line in the optional message when inviting users in Spanish

src/components/TextInput/BaseTextInput.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {
-    Animated, View, TouchableWithoutFeedback, AppState, Keyboard,
+    Animated, View, TouchableWithoutFeedback, AppState, Keyboard, StyleSheet,
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
 import RNTextInput from '../RNTextInput';
@@ -218,21 +218,26 @@ class BaseTextInput extends Component {
             !this.props.hideFocusedState && this.state.isFocused && styles.borderColorFocus,
             (this.props.hasError || this.props.errorText) && styles.borderColorDanger,
         ], (finalStyles, s) => ({...finalStyles, ...s}), {});
+        const maxHeight = StyleSheet.flatten(this.props.containerStyles).maxHeight;
+        const autoGrowHeight = this.props.autoGrowHeight && this.props.multiline;
 
         return (
             <>
                 <View>
                     <View
                         style={[
+                            (autoGrowHeight && {height: this.state.textInputHeight >= maxHeight ? maxHeight : this.state.textInputHeight}),
                             !this.props.multiline && styles.componentHeightLarge,
                             ...this.props.containerStyles,
                         ]}
                     >
                         <TouchableWithoutFeedback onPress={this.onPress} focusable={false}>
                             <View
 
-                                // When multiline is not supplied, calculating textinput height using onLayout
-                                onLayout={event => !this.props.multiline && this.setState({height: event.nativeEvent.layout.height})}
+                                // When autoGrowHeight is true calculate textinput width or when multiline
+                                // is not supplied calculate textinput height, using onLayout.
+                                onLayout={event => (autoGrowHeight && this.setState({width: event.nativeEvent.layout.width}))
+                                    || (!this.props.multiline && this.setState({height: event.nativeEvent.layout.height}))}
                                 style={[
                                     textInputContainerStyles,
 
@@ -301,6 +306,9 @@ class BaseTextInput extends Component {
                                             // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
                                             // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)
                                             !this.props.multiline && {height: this.state.height, lineHeight: undefined},
+
+                                            // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
+                                            autoGrowHeight && this.state.textInputHeight <= maxHeight ? styles.overflowHidden : styles.overflowAuto,
                                         ]}
                                         multiline={this.props.multiline}
                                         maxLength={this.props.maxLength}
@@ -351,17 +359,19 @@ class BaseTextInput extends Component {
                 {/*
                     Text input component doesn't support auto grow by default.
                     We're using a hidden text input to achieve that.
-                    This text view is used to calculate width of the input value given textStyle in this component.
+                    This text view is used to calculate width or height of the input value given textStyle in this component.
                     This Text component is intentionally positioned out of the screen.
                 */}
-                {this.props.autoGrow && (
+                {(this.props.autoGrow || autoGrowHeight) && (
 
                     // Add +2 to width so that the first digit of amount do not cut off on mWeb - https://github.com/Expensify/App/issues/8158.
                     <Text
-                        style={[...this.props.inputStyle, styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
-                        onLayout={e => this.setState({textInputWidth: e.nativeEvent.layout.width + 2})}
+                        style={[...this.props.inputStyle, autoGrowHeight && {maxWidth: this.state.width}, styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
+                        onLayout={e => this.setState({textInputWidth: e.nativeEvent.layout.width + 2, textInputHeight: e.nativeEvent.layout.height})}
                     >
-                        {this.state.value || this.props.placeholder}
+                        {/* We are appending a zero width space (\u200B) here as the browser will remove a trailing newline that doesn't
+                        have any characters after it. This allows linebreaks to work properly on web when the user presses enter. */}
+                        {`${this.state.value}${autoGrowHeight ? '\u200B' : ''}` || this.props.placeholder}
                     </Text>
                 )}
             </>

src/pages/workspace/WorkspaceInvitePage.js

@@ -342,8 +342,8 @@ class WorkspaceInvitePage extends React.Component {
                                     <TextInput
                                         label={this.props.translate('workspace.invite.personalMessagePrompt')}
                                         autoCompleteType="off"
+                                        autoGrowHeight
                                         autoCorrect={false}
-                                        numberOfLines={4}
                                         textAlignVertical="top"
                                         multiline
                                         containerStyles={[styles.workspaceInviteWelcome]}

src/styles/styles.js

@@ -843,6 +843,7 @@ const styles = {
         paddingTop: 23,
         paddingBottom: 8,
         paddingLeft: 0,
+        paddingRight: 0,
         borderWidth: 0,
     },
 
@@ -2603,7 +2604,7 @@ const styles = {
     },
 
     workspaceInviteWelcome: {
-        minHeight: 115,
+        maxHeight: 115,
     },
 
     peopleRow: {