Merge pull request #10455 from jayeshmangwani/white_gap_input_autofill

added onLayout to textinput perent component & used dynamic height in…
Expensify · Sep 7, 2022 · b1625ec · b1625ec
2 parents 85172f7 + 0fc7250
commit b1625ec
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
@@ -14,6 +14,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import Text from '../Text';
 import * as styleConst from './styleConst';
 import * as StyleUtils from '../../styles/StyleUtils';
+import variables from '../../styles/variables';
 import Checkbox from '../Checkbox';
 import getSecureEntryKeyboardType from '../../libs/getSecureEntryKeyboardType';
 import CONST from '../../CONST';
@@ -33,6 +34,7 @@ class BaseTextInput extends Component {
             textInputWidth: 0,
             prefixWidth: 0,
             selection: props.selection,
+            height: variables.componentSizeLarge,
 
             // Value should be kept in state for the autoGrow feature to work - https://github.com/Expensify/App/pull/8232#issuecomment-1077282006
             value,
@@ -217,6 +219,9 @@ class BaseTextInput extends Component {
                     >
                         <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})}
                                 style={[
                                     textInputContainerStyles,
 
@@ -268,6 +273,7 @@ class BaseTextInput extends Component {
                                             !hasLabel && styles.pv0,
                                             this.props.prefixCharacter && StyleUtils.getPaddingLeft(this.state.prefixWidth + styles.pl1.paddingLeft),
                                             this.props.secureTextEntry && styles.secureInput,
+                                            !this.props.multiline && {height: this.state.height},
                                         ]}
                                         multiline={this.props.multiline}
                                         maxLength={this.props.maxLength}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -729,7 +729,6 @@ const styles = {
         paddingBottom: 8,
         paddingHorizontal: 11,
         borderWidth: 0,
-        borderRadius: variables.componentBorderRadiusNormal,
     },
 
     textInputMultiline: {