[$4000] mWeb/Chrome - Request a setup call - Field inputs are overlapped by "Call me" button when the keypad opens up to edit the fields

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to URL https://staging.new.expensify.com/ and login with any account
2. Go to Settings > Workspace > General Setting > Request a call
3. Tap on any field

Expected Result:

The button should be positioned over the keyboard, but should not cover the input field that they are focused / tapped into

Actual Result:

The button covers the input fields when focused and inputs are overlapped and hidden

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.1.85.5

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

Bug5656083_Record_2022-07-20-19-28-20.mp4

Screen_Recording_20220720-131245_Chrome.mp4

20220802_120818.1.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 @danieldoglas (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

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

[danieldoglas]

Exported

[kadiealexander]

Upwork post:

https://www.upwork.com/ab/applicants/1551411585890521088/job-details
https://www.upwork.com/jobs/~01886d9f06d31bb19f

[melvin-bot]

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

[melvin-bot]

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

[wildan-m]

Proposal

To avoid the "Call me" button from jumping, we can move in the <FixedFooter> component into the <ScrollView> component.

git diff ./src/pages/RequestCallPage.js

@@ -341,27 +341,27 @@ class RequestCallPage extends Component {
                                             <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>
                                         </Section>
                                     </FormElement>
+                                    <FixedFooter>
+                                        {isBlockedFromConcierge && (
+                                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                                                <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
+                                                <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text
>
+                                            </View>
+                                        )}
+                                        {!_.isEmpty(this.props.requestCallForm.error) && (
+                                            <Text style={styles.formError}>
+                                                {this.props.requestCallForm.error}
+                                            </Text>
+                                        )}
+                                        <FormAlertWithSubmitButton
+                                            buttonText={this.props.translate('requestCallPage.callMe')}
+                                            onSubmit={this.onSubmit}
+                                            containerStyles={[styles.w100, styles.mb2, styles.mh0, styles.flexReset]}
+                                            isLoading={this.props.requestCallForm.loading}
+                                            isDisabled={isBlockedFromConcierge}
+                                        />
+                                    </FixedFooter>
                                 </ScrollView>
-                                <FixedFooter>
-                                    {isBlockedFromConcierge && (
-                                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
-                                            <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
-                                            <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text>
-                                        </View>
-                                    )}
-                                    {!_.isEmpty(this.props.requestCallForm.error) && (
-                                        <Text style={styles.formError}>
-                                            {this.props.requestCallForm.error}
-                                        </Text>
-                                    )}
-                                    <FormAlertWithSubmitButton
-                                        buttonText={this.props.translate('requestCallPage.callMe')}
-                                        onSubmit={this.onSubmit}
-                                        containerStyles={[styles.w100, styles.mb2, styles.mh0, styles.flexReset]}
-                                        isLoading={this.props.requestCallForm.loading}
-                                        isDisabled={isBlockedFromConcierge}
-                                    />
-                                </FixedFooter>
                             </>
                         )}
                 </KeyboardAvoidingView>

Sample result:

[parasharrajat]

Good point. Maybe we decided to change the flow? Asked here https://expensify.slack.com/archives/C01GTK53T8Q/p1661281246518809.

[parasharrajat]

Based on the slack chat, it seems that a recent refactor changed the behavior of this page and the issue is no more valid.

@Expensify/applause Could you please retest this?

[kadiealexander]

@Expensify/applause please see above!

[kbecciv]

@kadiealexander Issue is reproduced with build 1.1.96.5

Screen_Recording_20220902-123416_Chrome.1.mp4

[wildan-m]

@kbecciv That's updated expected behavior.

The content is scrollable when the keyboard shows up (over the keyboard height)

Please check my slack comment here.

[kadiealexander]

Price doubled! Also, reassigning as I'm ooo for the next 9 days.

[melvin-bot]

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

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION 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 production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

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.

[thienlnam]

Let's put a hold on doubling this, we haven't gotten confirmation that this bug is still occurring

cc @kbecciv Can you please confirm?

#10036 (comment)

[kbecciv]

@thienlnam Checking with team, will update you shortly.

[Puneet-here]

It's not reproducible because the button doesn't float now.