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

Expensify · Oct 20, 2021 · 04e2d12 · 04e2d12
2 parents f387857 + d045e55
commit 04e2d12
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -171,16 +171,21 @@ class BaseExpensiTextInput extends Component {
                             ]}
                         >
                             {hasLabel ? (
-                                <ExpensiTextInputLabel
-                                    label={label}
-                                    labelTranslateX={
-                                        ignoreLabelTranslateX
-                                            ? new Animated.Value(0)
-                                            : this.state.labelTranslateX
-                                    }
-                                    labelTranslateY={this.state.labelTranslateY}
-                                    labelScale={this.state.labelScale}
-                                />
+                                <>
+                                    {/* Adding this background to the label only for multiline text input,
+                                    to prevent text overlaping with label when scrolling */}
+                                    {multiline && <View style={styles.expensiTextInputLabelBackground} />}
+                                    <ExpensiTextInputLabel
+                                        label={label}
+                                        labelTranslateX={
+                                            ignoreLabelTranslateX
+                                                ? new Animated.Value(0)
+                                                : this.state.labelTranslateX
+                                        }
+                                        labelTranslateY={this.state.labelTranslateY}
+                                        labelScale={this.state.labelScale}
+                                    />
+                                </>
                             ) : null}
                             <TextInput
                                 ref={(ref) => {

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -521,6 +521,7 @@ const styles = {
         justifyContent: 'center',
         height: '100%',
         backgroundColor: themeColors.componentBG,
+        overflow: 'hidden',
     },
     expensiTextInputLabel: {
         position: 'absolute',
@@ -531,6 +532,15 @@ const styles = {
         fontFamily: fontFamily.GTA,
         width: '100%',
     },
+    expensiTextInputLabelBackground: {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: 25,
+        backgroundColor: themeColors.componentBG,
+        borderTopRightRadius: variables.componentBorderRadiusNormal,
+        borderTopLeftRadius: variables.componentBorderRadiusNormal,
+    },
     expensiTextInputLabelDesktop: {
         transformOrigin: 'left center',
     },
@@ -550,6 +560,7 @@ const styles = {
         paddingBottom: 8,
         paddingHorizontal: 11.5,
         borderRadius: variables.componentBorderRadiusNormal,
+        zIndex: -1,
     },
     expensiTextInputDesktop: addOutlineWidth({}, 0),
     expensiTextInputAndroid: left => ({