Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.53k stars 2.88k forks source link

[HOLD for payment 2023-09-27] [$1000] mWeb - 2FA - The screen jumps when deleting invalid code #23575

Closed kbecciv closed 1 year ago

kbecciv commented 1 year ago

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 http://staging.new.expensify.com/
  2. Login into the account
  3. Tap the profile avatar
  4. Select Security > Two-factor authentication
  5. Copy or download recovery codes
  6. Tap the "Next" button
  7. Enter an invalid code
  8. Delete the code

Expected Result:

The code input stays on focus and there are no unusual jumps

Actual Result:

The screen jumps when removing digits

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.45-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

https://github.com/Expensify/App/assets/93399543/e0ee3b91-6a9c-4e7d-8bc4-c891c4947366

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/~0127543ad8babfd9a3
  • Upwork Job ID: 1684832010423627776
  • Last Price Increase: 2023-09-07
eVoloshchak commented 1 year ago

@Christinadobrzyn, it's external, I'll post a review today Apologies for the delay everyone

eVoloshchak commented 1 year ago

Summary:

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.

Since this is pretty severe and will not be fixed in Chrome soon, I think we should apply a workaround.

I think we need to fix this for all inputs throughout the app. The bug is present for all numeric inputs, not just the magic input (not the screen jumping, but the password manager bar is present while it shouldn't)

ishpaul777 commented 1 year ago

In my opinion, i dont think applying workaround to all of numeric inputs (that does not efffect UX by rendering password bar) is necessary considering the accessibility tradeoffs, as both are merely workaround and root cause is unfixable. I would recommend selectively applying the workaround to only input that's causing bad UX like Magiccodeinputs on 2fa screen.

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

ydhandha commented 1 year ago

@eVoloshchak, Thank you checking the proposal I have added. I would like to add the point in the reference to what you have mentioned here:

  • @ydhandha's proposal is to set textInput's type the only type that isn't affected: type="search". The downside is, this will negatively affect accessibility

Furthermore, if we use multiline true it will convert into textarea, I believe it will impact the accessibility and screenreaders and for the same below are the differences: