[$500] Request - Participant deep link opens Participant page briefly and keyboard opens in Scan

[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.3.88-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
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:

Issue found when executing PR #26149

Action Performed:

Precondition: Make sure Scan tab is selected when Request money tab is opened

1. Navigate to https://staging.new.expensify.com/
2. Paste the link https://staging.new.expensify.com/request/new/participants/
   in chat
3. Tap on the link

Expected Result:

User is redirected to Request money selector page without opening Participants page and keyboard

Actual Result:

The link opens Participants page briefly with keyboard showing up. Sometimes Participants page is not shown but keyboard still appears

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

Android: Native

Bug6245643_1697905602424.Screen_Recording_20231021_205927_New_Expensify__2_.mp4

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014061867ab191f52d
• Upwork Job ID: 1715778155199119360
• Last Price Increase: 2023-11-18

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014061867ab191f52d

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

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

[chiragkcodes]

We already have #26538 to remove support for money request deep links.
I believe the issue would not invalid after these changes, we should hold this issue.
Can you please confirm if this would be still valid issue after planned changes under #26538 ? @hayata-suenaga

[hayata-suenaga]

can you check if the refactoring issue is really removing the deep link? If I remember correctly, I think @tgolen is making change in a way that still supports deep linking to money-request related pages

[chiragkcodes]

You are right, looks like we are doubling down on supporting money requests as I read discussion further. my bad.
In that case, We can continue to investigate further. Thanks @hayata-suenaga !

[benomatis]

Proposal

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

If Scan option is originally selected (where the keyboard is not normally needed), coming there using a Participant deep link opens the keyboard briefly.

What is the root cause of that problem?

With the introduction of the autoFocus prop in BaseOptionsSelector.js, which appears to have originally aimed to fix a focus issue in web and desktop (relevant commits: 4c478d3, 90b96de, f45b2ca, 7ff6e00, 0d2d560, 70beac8, 5d28fdb, 5788291), the relevant platform specific constraint ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform())) to allow this.textInput.focus() to execute inside setTimeout was only introduced in componentDidUpdate and is missing from componentDidMount.

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

The same platform specific constraint ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform())) should be introduced in componentDidMount to this.textInput.focus() inside setTimeout.

What alternative solutions did you explore? (Optional)

NA

Additional note

Note that shouldDelayFocus in src/components/OptionsSelector/index.android.js could be removed as part of this change as it appears to be unnecessary, it's not being used in BaseOptionsSelector.js at all.

Also note that I could not reproduce the part where the participant list appeared briefly first, but I do believe this solution should resolve the issue of the keyboard unnecessarily opening in that case as well, otherwise it should probably be investigated as a separate issue.

[melvin-bot]

📣 @benomatis! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[HezekielT]

Proposal

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

Participant deep link opens Participant page briefly and keyboard opens in Scan

What is root cause of that problem?

When a user opens participant page from deeplink we render MoneyRequestParticipantsPage component, but there are checks we do inside the useEffect which causes to navigate back if the conditions are met. In our case, the following condtion will be true

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

Lines 97 to 99 in 3f32b7d

	if (!isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
	navigateBack(true);
	}

The problem is that we don’t wait for the checks inside the useEffect to finish before rendering the component which means the <MoneyRequestParticipantsSelector will start to render causing the keyboard to be opened due to the focus on text input even if we are navigating back.

This is the first root cause.

The other problem happens when we try to access an index property that is undefined

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

We first need to know whether we will navigate back or not before rendering the MoneyRequestParticipantsPage component. In other word, we have to wait for the useEffect to finish the check and if none of the checks don’t cause the screen to navigate back, we will render the component otherwise we won't. We can do that by using a flag as shown below.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

Line 106 in 844b3b9

return (

return shouldRender && (

then set shouldRender to true inside useEffect if we are not going to navigate back.

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

Lines 97 to 99 in 3f32b7d

	if (!isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
	navigateBack(true);
	}

if (!isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
        navigateBack(true);
} else {
        setShouldRender(true);
}

For the second issue, we need to add an undefined check in Navigation.js.

What alternative solutions did you explore? (Optional)

[abdulrahuman5196]

Will check today

[abdulrahuman5196]

Reviewing now. Sorry for the delay.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[abdulrahuman5196]

Working on the review today. If not complete by today, will re-assign to fast up the issue.

[abdulrahuman5196]

Checking now

[abdulrahuman5196]

@benomatis I am able to understand the root cause and solution mentioned here #30127 (comment). Could you provide more update on the same?

[abdulrahuman5196]

@HezekielT I was testing out the proposal here #30127 (comment)

It is working if the app is in quit state, but if we have the app open/background state the fix is not working.

[abdulrahuman5196]

@abdulrahuman5196 basically a fix for desktop and web forces the focus, which is forcing the keyboard to appear on mobile even when it should not. That fix (to force focus) for desktop and web has later been set up so it only kicks in on those platforms when something changes in the component, but it kicks in for ALL platforms (including mobile) upon first render of the component. So my fix is about introducing the same constraits to only target desktop and web already existing for component update for component first render as well.

AFAIK, when we have a draft request like Request -> fill something -> participants page, quit app. Now if you deeplink to the participants page it should stay there and open the keyboard. So I am not sure if hiding is the keyboard is the best way.
Now I think the issue, the condition to trigger the navigateBack is delayed and the page with keyboard is rendered. After that the page is navigating back causing the flicker or keyboard to slowly come down.
Let me know if i am misunderstanding the proposal in any way

[benomatis]

@abdulrahuman5196 basically a fix for desktop and web forces the focus, which is forcing the keyboard to appear on mobile even when it should not. That fix (to force focus) for desktop and web has later been set up so it only kicks in on those platforms when something changes in the component, but it kicks in for ALL platforms (including mobile) upon first render of the component. So my fix is about introducing the same constraits to only target desktop and web already existing for component update for component first render as well.

AFAIK, when we have a draft request like Request -> fill something -> participants page, quit app. Now if you deeplink to the participants page it should stay there and open the keyboard. So I am not sure if hiding is the keyboard is the best way.

Now I think the issue, the condition to trigger the navigateBack is delayed and the page with keyboard is rendered. After that the page is navigating back causing the flicker or keyboard to slowly come down.

Let me know if i am misunderstanding the proposal in any way

Isn't the participant list hidden here because it's not needed? It's not even offered as an option, unless I'm missing something. If it does need to be hidden, the forced focus is redundant as the relevant input field would not be present.

[HezekielT]

@abdulrahuman5196 Thanks for the feedback. I tested both cases and it's working for me. I have attached a video for both cases. Please let me know if I'm missing something. Thanks!

Opening the deep link after quitting the app

Screencast-keyboard-quit.mov

Opening the deep link while the app is in background state

Screencast-keyboard-background.mov

[abdulrahuman5196]

Reviewing now

[abdulrahuman5196]

@HezekielT Just now tested with latest main. I am not able to see the keyboard. But its doing double navigation.

Screen.Recording.2023-11-02.at.11.18.26.PM.mp4

[HezekielT]

@abdulrahuman5196 I looked into the double navigation issue and it seems the MoneyRequestParticipantsPage() function is being called twice by the navigator due to a change in the value of route prop passed to the function. The first one is when route.path is undefined.

while the second one is when we have route.path

In both cases, navigateBack(true) will be called since the conditions will be met causing the double navigation.

We can solve it by calling the navigateBack(true) only when the route.path is not undefined. So my solution will be something like as shown below.

if (!isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
        if(route.path) {
                navigateBack(true);
        }
} else {
        setShouldRender(true);
}

We can also improve the if(route.path) check to if(route.path && route.path.startsWith('/')) to make it more strict.
This will address the double navigation issue.

This double navigation issue is also reproducible on main by the way.

Screencast.mov

[tgolen]

Hi! I was looking at this, and I think the problem is solved in my PR that refactors these components. This can probably be closed as won't fix for now.

[abdulrahuman5196]

Hi! I was looking at this, and I think the problem is solved in my PR that refactors these components. This can probably be closed as won't fix for now.

cc: @anmurali / Or we can keep in hold also

[melvin-bot]

@anmurali @abdulrahuman5196 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[abdulrahuman5196]

Just back from weekend
@anmurali to check on this

[melvin-bot]

@anmurali, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@anmurali, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@anmurali @abdulrahuman5196 this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[abdulrahuman5196]

Hi! I was looking at this, and I think the problem is solved in my PR that refactors these components. This can probably be closed as won't fix for now.

cc: @anmurali / Or we can keep in hold also

Gentle Ping @anmurali

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@anmurali, @abdulrahuman5196 Still overdue 6 days?! Let's take care of this!

[anmurali]

Closing per #30127 (comment)