[$500] [Distance] - mWeb - Focus is missing on the input Distance.

[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. Click plus sign
2. Select Request money
3. Click Distance, click Start & End and select a location
4. Click Next button

Expected Result:

Should focus on the input Distance.

Actual Result:

The focus appears and disappears instantly.

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.67.1
Reproducible in staging?: y
Reproducible in production?: y
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

Screen_Recording_20230908_121950_Chrome.mp4

Screen_Recording_20230911_170726_Chrome.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Mauri-salazar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694186307956829

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018884aaf0dffcfd73
• Upwork Job ID: 1701343243554549760
• Last Price Increase: 2023-09-11
• Automatic offers:
• tienifr | Contributor | 26637305
• Mauri-salazar | Reporter | 26637307

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018884aaf0dffcfd73

[melvin-bot]

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

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

[melvin-bot]

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

[papergliff]

Proposal

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

[Distance] - Focus is not setting when input distance appears

What is the root cause of that problem?

There is no focus setting within the MoneyRequestParticipantsSelector component, that is responsible for selecting the user

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

Adding autoFocus flag when OptionsSelector is called:

<OptionsSelector
  ...
  autoFocus
  shouldDelayFocus
  ...
/>

What alternative solutions did you explore?

basically add focus to componentDidUpdate hook:

if (this.optionsSelectorRef.current && this.optionsSelectorRef.current.focus) {
          this.optionsSelectorRef.current.focus();
}

and create reference in the MoneyRequestParticipantsSelector component itself, for it to pass to the OptionsSelector Component:

lass MoneyRequestParticipantsSelector extends Component {
    constructor(props) {
        super(props);

        ...
        this.optionsSelectorRef = React.createRef();
        ...
        
    }
        ...
   
        return (
            <OptionsSelector

               ...
                ref={this.optionsSelectorRef}
               ...
            />
        );

[melvin-bot]

📣 @papergliff! 📣
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. 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.
2. 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.
3. 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>

[papergliff]

Contributor details
Your Expensify account email: nixkid16@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~013fd4f74b41c52e11

[melvin-bot]

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

[akinwale]

Proposal

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

The input when trying to select a Workspace during the Distance Request flow does not automatically gain focus.

What is the root cause of that problem?

This seems to be intentional. However, if that's not the case, the MoneyRequestParticipantsPage component includes a MoneyRequestParticipantsSelector which makes use of an OptionsSelector, and we're not passing the autoFocus prop to this. Since autoFocus will be false in this case, the text input does not get automatically focused.

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

1. Add the autoFocus and shouldDelayFocus props to the MoneyRequestParticipantsSelector component, along with the corresponding prop types.

2. Pass these props on to the OptionsSelector in the component.

<OptionsSelector
  ...
+  autoFocus={this.props.autoFocus}
+  shouldDelayFocus={this.props.shouldDelayFocus}
/>

3. Update the props for the MoneyRequestParticipantsSelector in MoneyRequestParticipantsPage.

<MoneyRequestParticipantsSelector
  ...
+  autoFocus
+  shouldDelayFocus
/>

What alternative solutions did you explore? (Optional)

None.

[rizalalfandi123]

Proposal

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

The input when trying to select a Workspace during the Distance Request flow does not autofocus.

What is the root cause of that problem ?

in the MoneyRequestParticipantsSelector.js file, loads the OptionsSelector component as input. On the other hand, the OptionsSelector component already has an autoFocus prop ready to use, but the MoneyRequestParticipantsSelector.js does not implement the autoFocus props.

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

only adds the autoFocus and shouldDelayFocus props to the OptionsSelector component in MoneyRequestParticipantsSelector.js rather than passing the props to the parent component.

<OptionsSelector ... autoFocus shouldDelayFocus />

Screencast.from.2023-09-12.10-42-52.webm

What alternative solutions did you explore? (Optional)

none

[tienifr]

Proposal

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

The focus appears and disappears instantly.

There's also the issue where the screen animation to the participants screen is much quicker than other screen transitions, the screen just snaps out when we click on Next, there should be an animation with the correct timing.

What is the root cause of that problem?

It's because in OptionsSelector, we're focusing on the input immediately after rendering, without waiting for the screen transition to finish. So the input focusing will conflict with the screen transition, causing the 2 issues.

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

This has happened many times with a lot of inputs, and the standard way to fix it is to use onEntryTransitionEnd instead of relying on timeout and shouldDelayFocus (see discussion here)

So the steps are:

1. We should expose the ref of the input of OptionsSelector so that we can access the ref inside the pages that use OptionsSelector (for example the NewChatPage)
2. Expose that inputRef out to the MoneyRequestParticipantsSelector
3. In the MoneyRequestParticipantsPage screen, use the ref to focus on the input in the onEntryTransitionEnd callback of ScreenWrapper. (other usage of OptionsSelector that has the issue can be fixed similarly)

There's a known issue with onEntryTransitionEnd where sometimes it does not fire, this is already being handled separately here so I think we don't need to worry about it in this issue (if we do, we should hold the issue until that one is done, but basically we still need to do the onEntryTransitionEnd approach).

What alternative solutions did you explore? (Optional)

NA

[narefyev91]

Proposal from @tienifr looks good to me - in case we should use standard approach inside project for focusing inputs with onEntryTransitionEnd #27202 (comment)
🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @Mauri-salazar 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[tienifr]

PR ready for review: #27294.

[dylanexpensify]

Same as prior issue - distance related!

[melvin-bot]

🎯 ⚡️ Woah @narefyev91 / @tienifr, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @tienifr got assigned: 2023-09-12 18:27:17 Z
• when the PR got merged: 2023-09-13 14:56:24 UTC

On to the next one 🚀

[gadhiyamanan]

This is dupe of #24314 and that issue is eligible for reporting bonus because it was reported first

[amyevans]

Hmm @dylanexpensify I think you should still be assigned here as BZ, right? (and not @neil-marcellini)

[luacmartins]

FYI this issue was a dupe of #24314. Since #24314 was reported first, we should pay the reporting bonus to @gadhiyamanan. The PR fixing this issue was merged first though, so all other payments remain the same.

[neil-marcellini]

Hmm @dylanexpensify I think you should still be assigned here as BZ, right? (and not @neil-marcellini)

Yes I think BZ is all that remains to be done here.

[melvin-bot]

@amyevans @narefyev91 @dylanexpensify @tienifr 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!

[amyevans]

@dylanexpensify can you handle payments please? 🙏

[dylanexpensify]

on it @amyevans!

[dylanexpensify]

Payment summary:

• Reporter: @gadhiyamanan $250
• Contributor: @tienifr $750
• Contributor+: @narefyev91 $750

[gadhiyamanan]

@dylanexpensify it is eligible for $250 reporting bonus because it was reported before 30 August

[dylanexpensify]

ah yep - updating! nice catch

[dylanexpensify]

@narefyev91 @gadhiyamanan please apply here!

[narefyev91]

@narefyev91 @gadhiyamanan please apply here!

Hey @dylanexpensify - I'm from Callstack - no need any payment from Upwork :-)

[gadhiyamanan]

@dylanexpensify applied, thanks!

[dylanexpensify]

done!