[HOLD for payment 2023-12-20] iOS - IOU - "Save" button does not relocate to the top when the input label is focused

[lanitochka17]

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

---

Version Number: 1.4.11-4
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: user should be Signed In

1. Open app
2. Tap on FAB
3. Tap on Request Money
4. Select Manual tab
5. Write any amount and tap on Next button
6. Select any attendee and tap on Next button
7. Tap on the Description
8. Tap on the input label

Expected Result:

"Save" button should relocate to the top when input label becomes focused

Actual Result:

Save button does not relocate to the top when the input label is focused, becoming hidden behind the keyboard. The same behaviour for the "Add to split" button on the select the attendee screen
The issue is reproducible only on iOS. The same behaviour for the "Add to split" button on the select the attendee screen.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6309731_1702335393391.RPReplay_Final1702328673.mp4

View all open jobs on GitHub

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

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

[marcaaron]

My first guess would be #28618

[marcaaron]

@luacmartins any ideas on what might have caused this? It looks related to the form component stuff, but I don't see any recent changes touching that,.

[luacmartins]

It probably came from this PR - #28618

[marcaaron]

ok, cool. That's what I guessed above. But not too sure.

[luacmartins]

StepScreenWrapper sets shouldEnableKeyboardAvoidingView={false} the old component used ScreenWrapper which has true as default

[marcaaron]

Ah so this commit here: 43ef40e maybe?

[luacmartins]

Yea, I also noticed that the page also has extra margin on the bottom

[neonbhai]

The extra padding comes from safeAreaPaddingBottomStyle in this View:

App/src/pages/iou/request/step/StepScreenWrapper.js

Line 50 in 86a2521

<View style={[styles.flex1, safeAreaPaddingBottomStyle]}>

This adds on with FormAlertSubmitButton's padding

[marcaaron]

Alright so - definitely we want to set this to be true or leave it out : 43ef40e#diff-ed59b469264c5dd6f5daca0048937098dba104ef96a7f99dc932a6029cfa3b0eR30

But I think the issue with the margin is that safe area padding is getting applied twice. Once for the Form here:

App/src/components/Form/FormWrapper.js

Lines 110 to 115 in 86a2521

	<FormSubmit
	key={formID}
	ref={formContentRef}
	style={StyleSheet.flatten([style, safeAreaPaddingBottomStyle])}
	onSubmit={onSubmit}
	>

And once for the ScreenWrapper here:

App/src/pages/iou/request/step/StepScreenWrapper.js

Line 50 in 86a2521

<View style={[styles.flex1, safeAreaPaddingBottomStyle]}>

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

"Save" button does not relocate to the top when the input label is focused

What is the root cause of that problem?

• Save Button does not avoid keyboard
  This is because of this prop:

  App/src/pages/iou/request/step/StepScreenWrapper.js

  Line 44 in 86a2521

  shouldEnableKeyboardAvoidingView={false}

• Extra Bottom Padding:
  The extra padding comes from safeAreaPaddingBottomStyle in this View:
  

  App/src/pages/iou/request/step/StepScreenWrapper.js

  Line 50 in 86a2521

  <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>

  This adds with the Form Submit Button style of mb5 here:
  

  App/src/components/FormAlertWithSubmitButton.js

  Line 75 in 86a2521

  containerStyles={[styles.mh5, styles.mb5, styles.justifyContentEnd, ...props.containerStyles]}

  This happens for every component wrapped with StepScreenWrapper which Renders a Default Form Submit button

What changes do you think we should make in order to solve the problem?

• We should remove this line (as shouldEnableKeyboardAvoidingView is true by default)
• We should remove the safeAreaPaddingBottomStyle style from this View:
  

  App/src/pages/iou/request/step/StepScreenWrapper.js

  Line 50 in 86a2521

  <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>

Result:

Screen.Recording.2023-12-12.at.7.02.57.AM.mov

[marcaaron]

Thanks, but I'm in the process of getting a PR up now.

[neonbhai]

ah okay! would've loved to help

[marcaaron]

Well, you helped by validating the solution! Since we came up with the exact same one at the same time! 😄

[Julesssss]

Assigning @parasharrajat as the C+ reviewer

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.11-25 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Enable KB Avoiding View + remove padding bottom #32887

If no regressions arise, payment will be issued on 2023-12-20. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @parasharrajat requires payment through NewDot Manual Requests

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

@anmurali, @parasharrajat, @marcaaron Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[marcaaron]

I think this one is just waiting for payment. Gonna drop it to weekly as most are OOO this week, but we will get you @parasharrajat!

[parasharrajat]

Feel free to close it after posting the payment summary. I will request it later. Thanks.

[anmurali]

Payment summary

• @parasharrajat is owed $500 on New Dot

[parasharrajat]

@anmurali This is not a TS migration issue so I think the payment should be 500. Am I missing something?

[anmurali]

Fixed!

[parasharrajat]

Payment requested as per #32882 (comment)

[JmillsExpensify]

$500 approved for @parasharrajat