Merge pull request #5704 from AlfredoAlc/alfredo-fix-textinput-area

Change style for TextInput area
Expensify · Oct 12, 2021 · 50beee9 · 50beee9
2 parents 24cc6ff + 57dde06
commit 50beee9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -166,7 +166,6 @@ class BaseExpensiTextInput extends Component {
                         <View
                             style={[
                                 styles.expensiTextInputContainer,
-                                !hasLabel && styles.pv0,
                                 this.state.isFocused && styles.borderColorFocus,
                                 (hasError || errorText) && styles.borderColorDanger,
                             ]}
@@ -194,7 +193,7 @@ class BaseExpensiTextInput extends Component {
                                 placeholder={(this.state.isFocused || !label) ? placeholder : null}
                                 placeholderTextColor={themeColors.placeholderText}
                                 underlineColorAndroid="transparent"
-                                style={inputStyle}
+                                style={[inputStyle, !hasLabel && styles.pv0]}
                                 multiline={multiline}
                                 onFocus={this.onFocus}
                                 onBlur={this.onBlur}

diff --git a/src/components/ExpensiTextInput/ExpensiTextInputLabel/index.js b/src/components/ExpensiTextInput/ExpensiTextInputLabel/index.js
@@ -19,6 +19,7 @@ const ExpensiTextInputLabel = ({
                 labelScale,
             ),
         ]}
+        selectable={false}
     >
         {label}
     </Animated.Text>

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -505,9 +505,6 @@ const styles = {
         borderWidth: 1,
         borderRadius: variables.componentBorderRadiusNormal,
         borderColor: themeColors.border,
-        paddingTop: 25,
-        paddingBottom: 8,
-        paddingHorizontal: 11.5,
         justifyContent: 'center',
         height: '100%',
         backgroundColor: themeColors.componentBG,
@@ -520,6 +517,7 @@ const styles = {
         color: themeColors.textSupporting,
         fontFamily: fontFamily.GTA,
         width: '100%',
+        zIndex: -1,
     },
     expensiTextInputLabelDesktop: {
         transformOrigin: 'left center',
@@ -536,6 +534,9 @@ const styles = {
         fontSize: variables.fontSizeNormal,
         color: themeColors.text,
         ...spacing.pv0,
+        paddingTop: 25,
+        paddingBottom: 8,
+        paddingHorizontal: 11.5,
     },
     expensiTextInputDesktop: addOutlineWidth({}, 0),
     expensiTextInputAndroid: left => ({