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

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

• [ ] Android / native
• [x] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [ ] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

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

[melvin-bot[bot]]

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

[melvin-bot[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

[bfitzexpensify]

External

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~0127543ad8babfd9a3

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Pcholka-solution]

1. Analyze the existing codebase and identify the root cause of the screen jumping when deleting invalid code.
2. Implement a fix by modifying the relevant code, ensuring that the screen remains stable during code deletion.
3. Test the solution thoroughly on all platforms to ensure its effectiveness and compatibility.
4. Create a pull request in the Expensify/App GitHub repository with the proposed changes.
5. Provide detailed documentation and screenshots of the changes made, along with confirmation of testing on all platforms.

[melvin-bot[bot]]

📣 @Pcholka-solution! 📣 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>

[Pcholka-solution]

https://www.upwork.com/freelancers/bohdanhmil

[ishpaul777]

this looks like a chrome bug, we are disabling chrome autofill on MagicInput on every index except 0. this password manager bar is supposed be gone.

When the focus shifts from one to other the bar rerenders. causing the screen jump.

Not reproducable on Chrome Emualtor but reproducable on physical device

edit- can repro if signed in with google account with saved passwords

[ydhandha]

Proposal

[Updated]

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

The problem arises when a user deletes code on an Android device using the Chrome browser. Upon each deletion, the screen scrolls up momentarily and then returns to the correct position. This behavior should not occur and the screen should remain fixed at the current position while the user performs this action.

Furthermore, this issue has been successfully replicated on an actual Android device in the Chrome browser and whilst checking the same, I have observed that it occurs during both code entry and code deletion.

What is the root cause of that problem?

The root cause of this problem is with the input and the default behavior of the input which shows the suggested password and due to that it is causing the screen to move up for a moment and then focus gets back to the original input element / container.

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

To solve the problem:

• Do we need to show the suggestion panel as we are seeing? (We can refer the same from the Video attached with this issue)
• After determining the above, we should focus on the input behavior and should understand what other attributes / functionality that can we use / add to resolve this issue considering it should also comply to the existing behavior and that there are no conflicts with the functionality at all across all the devices and OS.

What alternative solutions did you explore?

I went through the default behaviors of the input element, debugged in actual device whilst adding probable input's default attributes to check and injecting script as necessary to prevent the default behavior to understand that in a perspective to resolve this issue, what best can be done considering, it should still render in the same way and to prevent the scroll whilst focusing on each input element

[melvin-bot[bot]]

📣 @ydhandha! 📣 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>

[ydhandha]

Contributor details Your Expensify account email: yashdhandha@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~01725b8c71ec683d69

[melvin-bot[bot]]

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

[ydhandha]

Proposal

Updated

[bfitzexpensify]

Few proposals for you to review when you get a chance @eVoloshchak - thank you!

[melvin-bot[bot]]

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

[bfitzexpensify]

Friendly reminder to review these proposals when you get a chance @eVoloshchak

[melvin-bot[bot]]

@eVoloshchak @bfitzexpensify 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!

[bfitzexpensify]

Another bump to review when you get a chance @eVoloshchak - thank you!

[eVoloshchak]

It's not only when deleting a code, it also happens when you simply enter a code

https://github.com/Expensify/App/assets/9059945/6ba31f02-94ae-4cf5-aba0-254442a193a7

[eVoloshchak]

we are disabling chrome autofill on MagicInput on every index except 0. this password manager bar is supposed be gone.

@ishpaul777, I can still reproduce this no matter if autofill is enabled or disabled, but it seems the behavior might have changed Were you able to resolve this?

[ishpaul777]

unfortunately no, but i identified the 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. There is no way we can disable the bar programmatically

[eVoloshchak]

@Pcholka-solution, @ydhandha, welcome and thank you for looking at this! A proposal should explain what the actual root cause of the issue is and what should we do in order to fix it. You can take a look at any of the proposals in https://github.com/Expensify/App/issues/22413 (or any other issue) as well as CONTRIBUTING.md

[ydhandha]

@eVoloshchak, I have reviewed and acknowledged the contents of CONTRIBUTING.md. I am on both the Slack Channels and have shared my contributor details as well

Kindly check my updated comment from last week (if not already). If needed, I can provide the solution and code here, along with explanations for necessary changes in the MagicCodeInput file. Your assistance is highly appreciated. Thank you.

[eVoloshchak]

f needed, I can provide the solution and code here, along with explanations for necessary changes in the MagicCodeInput file

Yeah, that would be awesome @ydhandha

[melvin-bot[bot]]

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

[ShogunFire]

I think @ishpaul777 is right but then why we don't have this bar on the report composer, what field is causing this bar ?

[ydhandha]

f needed, I can provide the solution and code here, along with explanations for necessary changes in the MagicCodeInput file

Yeah, that would be awesome @ydhandha

@eVoloshchak So basically, Android Chrome Browser would show the password manager as default for any input type except for input type="search". Since inputMode="numeric" is already in place it is showing the numeric keyboard but if we check the root attributes of the input, "inputmode" and "inputtype" both are different.

InputMode provides hints to the browser about the virtual keyboard layout and behavior InputType directly impacts the appearance & behavior of the input field and autofill behavior

The default type for input is text and the same is in here currently. Now, coming back to our original behaviour that we want - Password manager on the 0 index should be seen but not on the rest and so, we can pass type search on the rest of the inputs except at 0 and since search doesn't have any autofill behaviour, we can use type search on other input.

I have debugged the actual phone and managed to change the above directly through DOM manipulation and I am attaching original behaviour that we have currently and after changes behaviour

Furthermore, since rest of the logic and event like onChangeText, onKeyPress, onFocus is in place as per our requirements, I believe adding this, wouldn't conflict the behaviour and overall requirement considering this is a workaround to prevent the suggestion panel to show up.

https://github.com/Expensify/App/assets/69626304/59c5ae90-850d-44e9-9262-be3611e1e054

https://github.com/Expensify/App/assets/69626304/fbbb8da3-2180-452a-b990-cd448643dfd7

I hope this solution is suitable to overcome the issue and I can provide code where the changes are need to be done. Also if you have anything else on this please let me know

Currently, I have done the DOM manipulation directly instead of doing it in file since I haven't setup on my local but if you confirm I shall proceed further to setup on my local and can make the changes on MagicCodeInput file🙂

[ishpaul777]

inputType is not a prop in TextInput and i dont find TextInput provides a way to set type attribute directly. if we are think that we can compromise on semantics and accessibility for this case. we have to set the type attribute directly like this and also if we are going this way we should set the type="search" for all the input including the first otherwise moving from 0 index to other, this wont result in disable of autofill of otp there is a different bar appears for otp on first input.

<TextInput
             ref={(ref) => {
             // ref.setAttribute('type', 'search')
              // we cant set a attribute using direct manipulation on android and ios this may result in a regression.
              // we have define utility func specifically for web using 'index.js' which sets the attribute type ref only on web 
              // and `index.native.js` should be void function that does nothing
              setWebAttribute(ref, "type", "search")
               // ...

i would add a formal proposal if we move forward with this. ofc, this would work

[ydhandha]

Yeah. I am aware inputtype is not a prop in TextInput that we are using but, a default attribute of input tag including inputmode and the same I have mentioned. Also if you set type search for all the inputs, suggestion panel wouldn't appear for first index as well assuming we want to show it in the first input but not for the rest. Talking about the semantic and accessibility I don't forsee any issue since we are not changing any input behaviour or any events but, simply by explicitly setting attribute type search in this case and the rest will be the same as explained above.

[ishpaul777]

considering setting type="search" is the only way here. i agree with you.

but here you suggested which seems contradicting with what you are saying now

we can pass type search on the rest of the inputs

[ydhandha]

I have suggested to keep all the inputs type search except for 0 index to show the default password manager and clipboard is something would be visible for any input type not only for search or text. Furthermore, since I am very new to expensify, I thought not to change overall expectations / behaviour and still if we want to show password manager on 0 index than we should keep as it is and rest should be type search otherwise if keeping all the input type search and don't want to show password manager at all, then correct we should make it type search for all the inputs but surely, I'll go on with what is expected rather than I assume and advice to change it all. I hope this clears your concern @ishpaul777 🙂

[ydhandha]

@eVoloshchak, I hope you will find each of my comment for the solution useful with the explanation and if you could confirm I shall proceed with setting up the project on my local since in initial stage as per the guideline for the proposal, it was not mandatory to provide the code but the technical explanation or simply an explanation how it is reproduced and how could we resolve the same. But I shall only proceed after you confirm, and I would implement the solution and shall regressively check the change on all the supported platforms(given for the expensify) with the expected behaviour 🙂

[bfitzexpensify]

@eVoloshchak thoughts on the latest comments here?

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

@eVoloshchak, @bfitzexpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot[bot]]

@eVoloshchak @bfitzexpensify this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot[bot]]

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

[bfitzexpensify]

@eVoloshchak are any of the proposals here good to proceed with?

[eVoloshchak]

@ydhandha, thank you for such a thorough investigation!

Currently, I have done the DOM manipulation directly instead of doing it in file since I haven't setup on my local but if you confirm I shall proceed further to setup on my local and can make the changes on MagicCodeInput file

I agree this is the approach we should take (yet it's still a strange behavior, shouldn't we report this in react-native repo?) Could you post a proposal?

[melvin-bot[bot]]

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

[bfitzexpensify]

Heading ooo for a week. @Christinadobrzyn, this one has been lagging for a little while. I think if we don't hear back from @ydhandha in the next day or two, we should assign an internal engineer to take over and get this fixed up.

[ishpaul777]

I can take this, I have all necessary context for the issue. @bfitzexpensify

[ydhandha]

I agree this is the approach we should take (yet it's still a strange behavior, shouldn't we report this in react-native repo?) Could you post a proposal?

@eVoloshchak - This is not an issue of react-native framework but a certain behavior of input as I have explained in the above comments.

@bfitzexpensify, Since I was waiting for an input from @eVoloshchak, I'll post the proper proposal with the solution by today or by tomorrow morning and whether it can be fitted within the available props in the TextInput or to explicity set the attribute for input as, the solution(not in react-native context) is already defined in the previous comments of mine and the same needs to be implemented in this project.

[ydhandha]

Proposal

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

The problem arises when a user deletes or enters a code on an Android device using the Chrome browser. Upon each deletion, the screen scrolls up momentarily and then returns to the correct position. This behavior should not occur and the screen should remain fixed at the same position while the user performs this action.

What is the root cause of that problem?

The root cause of this problem is with the input and the default behavior of the input which shows the password manager bar when a user is logged in with an Account where their saved passwords can be used and due to that it is causing the screen to move up for a moment and then focus gets back to the original input element which only conflicts on Android Chrome Browser .

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

If we set the input type to search this can be resolved since only type search wouldn't show the password manager and we would still be able to render the same keyboard and no functionality will conflict after setting the same.

Since there is no props available within the TextInput Component where we can set the type to search, we can achieve the same using setAttribute method to the ref element(as you may see below) which prevents the password manager bar to show up and below is the alternative solution for which our issue can be resolved.

https://github.com/Expensify/App/blob/15d15117a6c6f7e999803278e2491a2af7f7fd81/src/components/MagicCodeInput.js#L280

- ref={(ref) => (inputRefs.current[index] = ref)}
+ ref={(ref) => {
+     inputRefs.current[index] = ref;
+ 
+     // Set the type to search to avoid the password manager from showing up.
+     if (ref && ref.setAttribute) {
+         ref.setAttribute("type", "search");
+     }
+ }}

For precise Web/Desktop targeting, I would suggest a solution as following:

• Create a "setElementAttribute" folder in "libs."
• Create a "index.js" wherein create a function for an ex: setElementAttribute(elm, attr, attrValue) which sets an attribute to respective element(elm) which has been passed using this function and the rest of the logic for null check and setAttribute to be placed
• Maintain the same function as an empty like this setElementAttribute = () => { } in "index.native.js" to retain native app behavior.
• The function defined above to be used whilst importing in MagicInputCode file

• ref={(ref) => (inputRefs.current[index] = ref)}
• ref={(ref) => {
• inputRefs.current[index] = ref;
• setElementAttribute(ref,"type","search");
• // Which sets it to type search for Web/Desktop but for native app it will be void
• }}

This above strategy certainly targets to solve the issue on platform-specific rather than changing it globally as well as this created function can be imported in other cases where, we may want to use the same to pass some custom attribute.

[ishpaul777]

Hopefully if I am not too late I have another solution I want to propose.

Proposal

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

mWeb - 2FA - The screen jumps when deleting invalid code

What is the root cause of that problem?

https://github.com/Expensify/App/issues/23575#issuecomment-1673688338

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

passing prop multilineto TextInput will change the input to textarea and prevents the password manager bar to render as it is specifc to input only. We will need to modify styles so that textarea takes 100% of height of parent View to be specific we have to set containerStyles={[styles.componentHeightLarge]}

https://github.com/Expensify/App/assets/104348397/15745030-0a06-44b5-b1a6-adb141b4db61

 <TextInput
+    multiline
+    containerStyles={[styles.componentHeightLarge]}

// ... rest of props

[Christinadobrzyn]

I think we're still reviewing proposals? @eVoloshchak can you confirm where we are with this?

[melvin-bot[bot]]

@eVoloshchak, @bfitzexpensify, @Christinadobrzyn Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Christinadobrzyn]

@eVoloshchak sorry to keep bugging you about this but I'm a little confused where we are with this. Is this an internal issue or can it be external?

If it's internal I'll add an engineer to work on the PR. If it's external, are any of these proposals good to move forward with?