[$500] mWeb - Focusing on display name inputs moves the save button downward

[kavimuru]

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 on your avatar and open settings
2. open profile then display name
3. Now start focusing in the First name input then last name input (Try more than once)

Expected Result: -

The save button shouldn't move after focusing on the display name inputs

Actual Result:

Focusing on display name inputs moves the save button downward briefly.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.66-3
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

az_recorder_20230908_112915.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Ahmed-Abdella
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693330266445729

XRecorder_29082023_182202.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01024bce3028dfb4c7
• Upwork Job ID: 1701270958312742912
• Last Price Increase: 2023-09-25
• Automatic offers:
• ishpaul777 | Contributor | 26876433
• Ahmed-Abdella | Reporter | 26876437

[melvin-bot]

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

Job added to Upwork: https://www.upwork.com/jobs/~01024bce3028dfb4c7

[melvin-bot]

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

[melvin-bot]

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

[puneetlath]

Opening up for proposals. I'd be curious if this is only happening on this form or also on others.

[ishpaul777]

Proposal

Problem

Focusing on display name inputs moves the save button downward

Root cause

root cause here is a chrome default behaviour with the password bar rerendering everytime a input get focussed.
when a input blurred it dissapear the bar and quickly when the other input gains focus it rerender bar causing the jump effect.

Changes

Password Manager bar can be prevented either of these 2 ways

• explicitly setting type to 'search' ref.current.setAttribute('type', 'search') when Browse.isChrome() and screenSmallWidth.
• passing prop multiline to TextInput that will change the input to textarea and prevents the password manager bar to render as it is specifc to input only.

[Ahmed-Abdella]

@puneetlath it is also reproducible in legal name inputs page

[melvin-bot]

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

[melvin-bot]

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

[eVoloshchak]

This has the same root cause as #23575 as @ishpaul777 pointed out

This is a known bug in Mobile Chrome. It was reported a year ago, there seems to be no activity or plans to resolve it.

The root cause is unfixable, so we ended up applying a workaround for the magic code input only (this was causing severe glithing for a particular page with magic code input).
Both approaches proposed by @ishpaul777 have accessibility tradeoffs, but we ultimately landed on setting the input type to 'search' usingref.current.setAttribute('type', 'search'). The only downside is the screen reader saying Edit text. Search field instead of a simple Edit text. This bug is present throughout the app, so I think resolving it is worth the accessibility tradeoff (though this will be fixed in Chrome at some point, do we have a process to monitor this?)

🎀👀🎀 C+ reviewed!

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[puneetlath]

Hmm, interesting. I'm going to raise this internally as this is an interesting tradeoff to consider.

[melvin-bot]

@puneetlath @eVoloshchak 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? 💸

[puneetlath]

Ok I discussed internally. Let's go forward. It's not ideal, but let's do it.

[melvin-bot]

📣 @eVoloshchak Please request via NewDot manual requests for the Reviewer role ($500)

[melvin-bot]

📣 @ishpaul777 🎉 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]

📣 @Ahmed-Abdella 🎉 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

[ishpaul777]

hii @puneetlath @eVoloshchak, I just noticed changing the type="search" also changes the return key type to search icon, we will have to change the returnKeyType to "next" for the all inputs and for the last input we have to set "go" manually, Moreover setting returnKeyType to "next" will not move the focus to next input because of this issue facebook/react-native#31794 in React native, (work around given in issue is not working). So are we willing to make the tradeoff also?

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[puneetlath]

Hmmmm, I'm not a big fan of that and starting to feel that this probably isn't worth it.

[ishpaul777]

I think chrome just fixed the rerendering of password manager bar, the issue is no longer reproduceable

[melvin-bot]

@puneetlath @eVoloshchak @ishpaul777 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!

[eVoloshchak]

Isn't reproducible for me too

screen-20231002-114702.mp4

[puneetlath]

Thanks guys. That's great that Chrome fixed it and this is no longer an issue. Given the effort that went in here, I think a partial payment is still in order, so I'll go ahead and pay that and then we can close this out.

[ishpaul777]

@puneetlath Thanks Accepted the Offer!

[puneetlath]

Ok great. Payment summary:

$50 - @Ahmed-Abdella (paid via Upwork)
$250 - @ishpaul777 - C (paid via Upwork)
$250 - @eVoloshchak - C+ (to be paid via NewDot)

@eVoloshchak let me know when you've requested and I'll close the issue out.

[ishpaul777]

Thanks! Payment Received

[eVoloshchak]

@puneetlath , requested the payment, thanks!

[puneetlath]

Thanks everyone!

[JmillsExpensify]

$250 payment approved for @eVoloshchak based on BZ summary.