[$1000] mWeb - Request money - There is No cursor in amount page

[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. Go to URL https://staging.new.expensify.com/
2. Login with any account
3. Click on the green plus button (FAB) -> Request Money
4. Enter an amount

Expected Result:

Cursor is present

Actual Result:

There is No cursor

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.2.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

Notes/Photos/Videos: Any additional supporting documentation

Bug6025394_RPReplay_Final1681935756__1_.mp4

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/~01b32376b47d699980
• Upwork Job ID: 1651248028633018368
• Last Price Increase: 2023-04-26

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[michaelhaxhiu]

Some talk about grouping this GH into a bigger auto-focus fix. I will review and update tomorrow

[michaelhaxhiu]

@sobitneupane do you think we should group this fix with others? It's a legit bug report - there should indeed be a cursor here.

[sobitneupane]

@michaelhaxhiu It is a quite different issue than the issues being handled in #17579. In #17579 issue, we are dealing with Textinput with missing autofocus. Amount page already has autofocus but it is not being shown in mWeb. So, I think this issue should be independently handled.

[michaelhaxhiu]

Thanks really helpful, thanks @sobitneupane !

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01b32376b47d699980

[MelvinBot]

Current assignee @michaelhaxhiu is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

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

[kuluruvineeth]

@michaelhaxhiu could you please add me to slack groups so that i can get instructions to setup for ios and android application for local development as of now i am able to run only web and desktop version, please help with the guidelines to setup for ios and android on mac m1, thanks.

[jasperhuangg]

@kuluruvineeth What have you tried to get them running on iOS and Android? What are you confused about?

[kuluruvineeth]

@jasperhuangg i figured out issues and now i am able to run on both ios and android, thanks.

[narefyev91]

Hi I'm Nicolay from Callstack - expert contributor group - will start investigation in this area

[MelvinBot]

📣 @narefyev91 You have been assigned to this job by @mountiny!
Please apply to this job in Upwork 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 📖

[mountiny]

Assigning Nikolay to this as he has worked on this page previously, there are some consideration to have regarding the selection which is buggy on native and we are working on a bigger refactor of this. So maybe this could be on hold for that

[jasperhuangg]

Still waiting on @narefyev91's PR, not overdue!

[narefyev91]

Proposal

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

Input component is not get focus when page is mounted

What is the root cause of that problem?

Well i think there are a lot of discussion around this issue #10414 - which is the same as we facing here.
But i would like to also paste my findings.
I'm not quite sure that we will be able to fix it because of:

1. Safari on mobile does not support autoFocus

2) Safari prevent any manual on focus event - until user will make any interaction on the page https://bugs.webkit.org/show_bug.cgi?id=195884#c4

From Apple team:
We (Apple) like the current behaviour and do not want programmatic focus to bring up the keyboard when you do not have a hardware keyboard attached and the programmatic focus was not invoked in response to a user gesture. Why you may ask...because auto bringing up the software keyboard can be seen as annoying and a distraction to a user (not for your customers, but for everyone not using your app) given that:

1. We bring up the keyboard, which takes up valuable real estate on screen.
2. When we intent to bring up the software keyboard we zoom and scroll the page to give a pleasing input experience (or at least we hope it is pleasing; file bugs if not).

And i think even google was not able to make it working:

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

The only potential fix here - which i think were already done before - when user click on numpad we add new value in input and focus a field.

    updateAmountNumberPad(key) {
        if (!this.textInput.isFocused()) {
            this.textInput.focus();
        }

The code already exists but it it not working as expected in safari ios - because when we mounted the page - this.textInput.isFocused() will be equal true - and that's why on safari ios - when you click on numpad - we see number - but not see cursor.
Possible solution here to create additional function same as above but with additional check something like this:
if (!this.textInput.isFocused() || isMobileSafari()) focus input

What alternative solutions did you explore?

cc @mananjadhav @michaelhaxhiu @jasperhuangg

[mananjadhav]

Ohh I just saw the platform mentioned as iOS Safari, I thought it was native. I would recommend :donothing: here. This is the standard behavior by Apple, and I am sure that's the case across the app.

[MelvinBot]

@mananjadhav @michaelhaxhiu @narefyev91 @jasperhuangg 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!

[jasperhuangg]

Ah I agree, I think it's a relatively minor quirk that we shouldn't really be focusing our time on, especially if this is true:

standard behavior by Apple, and I am sure that's the case across the app.

Closing, thanks everyone!