[Bug] [$250] Android - Invite members - Invite message text box disappears when select emoji picker

[kbecciv]

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. Open the test app
2. Log in to applause.expensifail account
3. Navigate to the Workspace editor page
4. Navigate to Manage Members
5. Tap the Invite button
6. Select the Invite message text box
7. Select emoji picker

Expected Result:

Invite message text box is still visible when selecting the emoji picker

Actual Result:

Invite message text box disappears when selecting the emoji picker

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.92.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5705895_screen-20220826-224227.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @nkuoch (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

Lol. Good catch...

[melvin-bot]

Triggered auto assignment to @adelekennedy (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[kakajann]

Proposal

This is the KeyboardAvoidingView bug when you set its behavior to height.

Solution

We have to make this behavior undefined when we use this component in WorkspaceInvitePage on Android.

App/src/components/ScreenWrapper/BaseScreenWrapper.js

Line 80 in e21736d

<KeyboardAvoidingView style={[styles.w100, styles.h100]} behavior={this.props.keyboardAvoidingViewBehavior}>

We can't simply add the prop (keyboardAvoidingViewBehavior={undefined}) to this component:

App/src/pages/workspace/WorkspaceInvitePage.js

Line 231 in e21736d

<ScreenWrapper>

because undefined will be treated as height due to this line:

App/src/components/ScreenWrapper/index.android.js

Line 14 in e21736d

defaultProps.keyboardAvoidingViewBehavior = 'height';

So, how to fix?

1. Add default to keyboardAvoidingViewBehavior in ScreenWrapper prop types

-    keyboardAvoidingViewBehavior: PropTypes.oneOf(['padding', 'height', 'position']),
+    keyboardAvoidingViewBehavior: PropTypes.oneOf(['default', 'padding', 'height', 'position']),

2. Modify ScreenWrapper android code

import React, {useMemo} from 'react';
import BaseScreenWrapper from './BaseScreenWrapper';
import {defaultProps, propTypes} from './propTypes';

const ScreenWrapper = (props) => {
    const keyboardAvoidingViewBehavior = useMemo(() => {
        if (props.keyboardAvoidingViewBehavior === 'default') {
            return undefined;
        }

        if (props.keyboardAvoidingViewBehavior !== undefined) {
            return props.keyboardAvoidingViewBehavior;
        }

        return 'height';
    }, [props.keyboardAvoidingViewBehavior]);

    return (
        <BaseScreenWrapper
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...props}
            keyboardAvoidingViewBehavior={keyboardAvoidingViewBehavior}
        >
            {props.children}
        </BaseScreenWrapper>
    );
};

defaultProps.keyboardAvoidingViewBehavior = undefined;

ScreenWrapper.propTypes = propTypes;
ScreenWrapper.defaultProps = defaultProps;

export default ScreenWrapper;

3. Create a cross-platform WorkspaceInvitePageWrapper component (index.js and index.android.js) and return

<ScreenWrapper keyboardAvoidingViewBehavior="default">
{children}
</ScreenWrapper>

on android. Otherwise ScreenWrapper component without any prop.

Result

Screen.Recording.2022-08-27.at.8.28.59.AM.mov

[adelekennedy]

internal
external

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[melvin-bot]

Triggered auto assignment to @roryabraham (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[roryabraham]

Putting this on HOLD on #10273

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[adelekennedy]

this is on hold

[tgolen]

I removed the HOLD on this and assigned it to me because this is fixed in #11586

[adelekennedy]

I don't think any payment is due, this was reported by applause and no proposals were accepted

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[parasharrajat]

No review was requested from me on the related PR. I am unassigning myself from it. let me know otherwise.

[parasharrajat]

let's remove the help wanted and External labels.

[roryabraham]

Removed Help Wanted for now

[mvtglobally]

Issue not reproducible during KI retests. (Third week) @roryabraham Are we ok to close this?

[tgolen]

Wow, it's so weird that a lot of these are disappearing, even without my fix deployed. It's fine to close this.

[0xmiros]

This issue is still reproducible. Please use Gboard for device input method.
Proposal here: https://expensify.slack.com/archives/C01GTK53T8Q/p1669197533676619?thread_ts=1669197511.103729&cid=C01GTK53T8Q

Before fix:

before.mp4

After fix:

after.mp4

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.