[WAITING ON MIROSLAV FOR PAYMENT] [HOLD for payment 2023-08-28] [$1000] IOS - New contact method - "New contact method" button abrupt animation when tap on email

[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!

---

Issue found when executing PR #19040

Action Performed:

1. Open https://staging.new.expensify.com/
2. Tap profile icon
   3, Tap "Profile"
3. Tap "Contact method"
4. Tap "New contact method"
5. Type an email
6. Tap "Add"
7. Tap on email from step 6 to confirm it

Expected Result:

When user taps on email a smooth animation of transition from the page "Contact methods" to email confirmation page appears

Actual Result:

When user taps on email "New contact method" button slides up and appears cut before user is transferred to email confirmation page

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.17.0

Reproducible in staging?: yes

Reproducible in production?: n/a

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

Notes/Photos/Videos: Any additional supporting documentation

https://platform.applause.com/services/links/v1/external/5a5bc5fdc111765130d79b24b0362e74f114b5358cf8d0952195a66b00d1e5c7

https://platform.applause.com/services/links/v1/external/661a2aa54f61e6426e10547569cd9407700e54124c4968b7a6347d6a4390f16f

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0123c376fe9502d376
• Upwork Job ID: 1671611450736222208
• Last Price Increase: 2023-08-04
• Automatic offers:
• situchan | Contributor | 26067330

[melvin-bot]

Triggered auto assignment to @jliexpensify (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

[hungvu193]

Proposal

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

IOS - New contact method - "New contact method" button abrupt animation when tap on email

What is the root cause of that problem?

After click the contact methods, our app is navigating to Contact Method Detail page, and the keyboard opened, this also make the current page (which is not fully unmounted) push the bottom button since it's still navigating.

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

We should wait for the transition ended and then rendered the content of Contact Detail Page, we can avoid this issue.
So we can add onEntryTransitionEnd function inside ContactMethodDetailsPage like this:

            <ScreenWrapper
                onEntryTransitionEnd={() => {
                    this.setState({ isTransitionEnd: true })
                }}

and update the content of it like this:

 {this.state.isTransitionEnd ? <ScrollView ></ScrollView> : <FullScreenLoadingorSkeletonLoading />

Depends on the requirement, we can decide to show loading or skeleton, or wait for transition end and focus or render the magic code input.

What alternative solutions did you explore? (Optional)

Instead of adding condition inside onEntryTransitionEnd in every screen, we can also update the ScreenWrapper that will show the loading until transition ended.
So we will need to add a new props called shouldShowLoadingWhileTransitioning to our ScreenWrapper, and also updated the ScreenWrapper render condition.

{this.props.shouldShowLoadingWhileTransitioning && this.state.didScreenTransitionEnd ? childrenStuff : <LoadingOrSkeleton />}

Result:

Screen.Recording.2023-05-24.at.22.51.37.mov

[jliexpensify]

Hi @0xmiroslav - @kbecciv stated this was related to your PR #19040

Could you have a look at this issue? Cheers!

[0xmiroslav]

yes it's related but this is more like polish than bug.
This comes from immediate auto-focus of magic input.
But I believe this behavior existed before that PR (magic code implementation) as seen in video:

Screen.Recording.2023-05-26.at.5.24.28.AM.mov

If this is worth fixing, I am happy to take this one as C+.

[jliexpensify]

Thanks! @joelbettner do you mind weighing in if this is worth fixing?

[joelbettner]

This is definitely worth fixing, I'm a bit confused by the proposal, though. It looks like this behavior is happening in multiple places (the new contact method and the entering of the magic code). Is the proposal for fixing this in all places, or only in one place? I think we should be fixing this in all places.

[hungvu193]

My proposal only fixed it in this screen. Yeah, there're other screen with similar behavior, they are doing similar thing as this proposal, but in stead of show loading, they are waiting for transition end and focus the ref.

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.js

Lines 112 to 118 in 7930cb5

	<ScreenWrapper
	onEntryTransitionEnd={() => {
	if (!loginInputRef.current) {
	return;
	}
	loginInputRef.current.focus();

App/src/pages/settings/Payments/AddPayPalMePage.js

Line 46 in 7930cb5

<ScreenWrapper onEntryTransitionEnd={() => payPalMeInput.current && payPalMeInput.current.focus()}>