[HOLD for payment 2022-04-12] Workspace Invite page - TexInput doesn't scroll up on pressing arrow keys - reported by @rushatgabhane

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to any workspace -> manage members -> invite page.
2. Have more than 5 lines in personal message, and put the cursor at end.
3. Use up arrows and go to the first line.

Expected Result:

TextInput scrolls up and first line isn't hidden by the label.

Actual Result:

First line of personal message is hidden by the label.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

151804315-7942c372-cb8e-4e18-b71a-4b97e526ac4e.mov

Expensify/Expensify Issue URL:
Issue reported by: @rushatgabhane
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643722266000989

Job Post: https://www.upwork.com/jobs/~01a944fb11e102568c

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @greg-schroeder (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Tushu17]

Proposal (If gets external)

we need to change pv3 to mv3 below -

App/src/pages/workspace/WorkspaceInvitePage.js

Lines 292 to 296 in 8431ed4

	<View style={[styles.ph5, styles.pv3]}>
	<TextInput
	label={this.props.translate('workspace.invite.personalMessagePrompt')}
	autoCompleteType="off"
	autoCorrect={false}

or we can add margin in container styles of input and remove vertical padding from the view.

[sobitneupane]

PROPOSAL
This issue exists not only in Workspace Invite page but in all multiline TextInputs with label.
Reason:
PaddingTop is being used inside the <TextInput /> component. So, while moving the cursor up with the keyboard, we cannot reach to the top as there is padding at the top.
Solution:
We can solve this issue by removing paddingTop from the <TextInput /> and adding the padding to its parent component. For this, some changes should be made in styles of BaseTextInput.
Changes To be made in src/styles/styles.js

    baseTextInput: {
        fontFamily: fontFamily.GTA,
        fontSize: variables.fontSizeNormal,
        lineHeight: variables.fontSizeNormalHeight,
        color: themeColors.text,
-        paddingTop: 23,
        paddingBottom: 8,
        paddingHorizontal: 11,
        borderWidth: 0,
        borderRadius: variables.componentBorderRadiusNormal,
    },
    
    textInputAndIconContainer: {
+        paddingTop: 23,
        flex: 1,
        height: '100%',
        zIndex: -1,
        flexDirection: 'row',
    },

    secureInput: {
+        paddingTop: 23,
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
    },

Changes to be made in src/components/TextInput/BaseTextInput.js

App/src/components/TextInput/BaseTextInput.js

Lines 218 to 223 in a98df64

	<View style={[styles.textInputAndIconContainer]}>
	<RNTextInput
	ref={(ref) => {
	if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); }
	this.input = ref;
	}}

<View style={[
                                styles.textInputAndIconContainer,
+                                (!hasLabel || this.props.secureTextEntry) && styles.pv0,
                            ]}>

[MelvinBot]

@greg-schroeder Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@greg-schroeder Still overdue 6 days?! Let's take care of this!

[MelvinBot]

@greg-schroeder Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!