diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js index 04c92bf7f1e6..31f94248d571 100644 --- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js +++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js @@ -171,16 +171,21 @@ 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 && } + + ) : null} { diff --git a/src/styles/styles.js b/src/styles/styles.js index a329fcba50a0..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', @@ -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 => ({