Merge pull request #8137 from mollfpr/fix-7729

add scroll padding to multiline and labeled text input
Expensify · Mar 25, 2022 · 9c50db7 · 9c50db7
2 parents c04fca7 + 880da9a
commit 9c50db7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
@@ -16,6 +16,8 @@ class TextInput extends React.Component {
     }
 
     render() {
+        const isLabeledMultiline = Boolean(this.props.label.length) && this.props.multiline;
+
         return (
             <BaseTextInput
                 // eslint-disable-next-line react/jsx-props-no-spreading
@@ -33,7 +35,12 @@ class TextInput extends React.Component {
 
                     this.props.innerRef.current = el;
                 }}
-                inputStyle={[styles.baseTextInput, styles.textInputDesktop, ...this.props.inputStyle]}
+                inputStyle={[
+                    styles.baseTextInput,
+                    styles.textInputDesktop,
+                    isLabeledMultiline && styles.textInputMultiline,
+                    ...this.props.inputStyle,
+                ]}
             />
         );
     }

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -702,6 +702,10 @@ const styles = {
         borderRadius: variables.componentBorderRadiusNormal,
     },
 
+    textInputMultiline: {
+        scrollPadding: '23px 0 0 0',
+    },
+
     textInputAndIconContainer: {
         flex: 1,
         height: '100%',