From 562ad4ec4e06e6acc2ee3425bc79f2e624496b96 Mon Sep 17 00:00:00 2001
From: Alfredo Alcantara <alfredo.alcantara.r@gmail.com>
Date: Tue, 19 Oct 2021 20:36:54 -0700
Subject: [PATCH 1/6] Adds background to label

---
 .../ExpensiTextInput/BaseExpensiTextInput.js  | 26 ++++++++++++-------
 src/styles/styles.js                          | 10 +++++++
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index 04c92bf7f1e6..93e2b81ce313 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -171,16 +171,22 @@ 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}
-                                />
+                                <>
+                                    {multiline ? (
+                                        <View 
+                                            style={styles.expensiTextInputLabelBackground}/>
+                                    ) : null}
+                                    <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
index a329fcba50a0..f888f38c5456 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -531,6 +531,15 @@ const styles = {
         fontFamily: fontFamily.GTA,
         width: '100%',
     },
+    expensiTextInputLabelBackground: {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: 28,
+        backgroundColor: themeColors.componentBG,
+        borderTopRightRadius: variables.componentBorderRadiusNormal,
+        borderTopLeftRadius: variables.componentBorderRadiusNormal,
+    },
     expensiTextInputLabelDesktop: {
         transformOrigin: 'left center',
     },
@@ -550,6 +559,7 @@ const styles = {
         paddingBottom: 8,
         paddingHorizontal: 11.5,
         borderRadius: variables.componentBorderRadiusNormal,
+        zIndex: -1,
     },
     expensiTextInputDesktop: addOutlineWidth({}, 0),
     expensiTextInputAndroid: left => ({

From cc08d6c72ed137f40b7a93d83285805135c2cf07 Mon Sep 17 00:00:00 2001
From: Alfredo Alcantara <alfredo.alcantara.r@gmail.com>
Date: Tue, 19 Oct 2021 21:00:33 -0700
Subject: [PATCH 2/6] Alingned closing bracket

---
 src/components/ExpensiTextInput/BaseExpensiTextInput.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index 93e2b81ce313..787d1e9b39d2 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -173,8 +173,9 @@ class BaseExpensiTextInput extends Component {
                             {hasLabel ? (
                                 <>
                                     {multiline ? (
-                                        <View 
-                                            style={styles.expensiTextInputLabelBackground}/>
+                                        <View
+                                            style={styles.expensiTextInputLabelBackground}
+                                        />
                                     ) : null}
                                     <ExpensiTextInputLabel
                                         label={label}

From 93a79ba8ce3e1272a0008e94645d000f75f8fb44 Mon Sep 17 00:00:00 2001
From: Alfredo Alcantara <alfredo.alcantara.r@gmail.com>
Date: Wed, 20 Oct 2021 12:47:14 -0700
Subject: [PATCH 3/6] Changes label background height to correct height

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index f888f38c5456..4dbc0f5a53f4 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -535,7 +535,7 @@ const styles = {
         position: 'absolute',
         top: 0,
         width: '100%',
-        height: 28,
+        height: 25,
         backgroundColor: themeColors.componentBG,
         borderTopRightRadius: variables.componentBorderRadiusNormal,
         borderTopLeftRadius: variables.componentBorderRadiusNormal,

From 863598257a932144ece609eb43becc354ed7f4b0 Mon Sep 17 00:00:00 2001
From: Alfredo Alcantara <alfredo.alcantara.r@gmail.com>
Date: Wed, 20 Oct 2021 12:49:28 -0700
Subject: [PATCH 4/6] Adds comment explaining the use of label background

---
 src/components/ExpensiTextInput/BaseExpensiTextInput.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index 787d1e9b39d2..f79013bb6dda 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -172,6 +172,8 @@ class BaseExpensiTextInput extends Component {
                         >
                             {hasLabel ? (
                                 <>
+                                    {/* Adding this background to the label only for multiline text input, 
+                                    to prevent text overlaping with label when scrolling */}
                                     {multiline ? (
                                         <View
                                             style={styles.expensiTextInputLabelBackground}

From 336c913ef4afab20e6869cd52c739e99950d4776 Mon Sep 17 00:00:00 2001
From: Alfredo Alcantara <alfredo.alcantara.r@gmail.com>
Date: Wed, 20 Oct 2021 12:53:18 -0700
Subject: [PATCH 5/6] Adds overflow prop to textinput container

---
 src/styles/styles.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4dbc0f5a53f4..4488a4643d4a 100644
--- 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',

From e6e6f893ac94f77d5c25e239b5da23e07d3aea8a Mon Sep 17 00:00:00 2001
From: Alfredo Alcantara <alfredo.alcantara.r@gmail.com>
Date: Wed, 20 Oct 2021 13:22:47 -0700
Subject: [PATCH 6/6] Modifies styling syntax

---
 src/components/ExpensiTextInput/BaseExpensiTextInput.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index f79013bb6dda..31f94248d571 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -172,13 +172,9 @@ class BaseExpensiTextInput extends Component {
                         >
                             {hasLabel ? (
                                 <>
-                                    {/* Adding this background to the label only for multiline text input, 
+                                    {/* Adding this background to the label only for multiline text input,
                                     to prevent text overlaping with label when scrolling */}
-                                    {multiline ? (
-                                        <View
-                                            style={styles.expensiTextInputLabelBackground}
-                                        />
-                                    ) : null}
+                                    {multiline && <View style={styles.expensiTextInputLabelBackground} />}
                                     <ExpensiTextInputLabel
                                         label={label}
                                         labelTranslateX={