[$500] Workspace - Keyboard is flickering when entering magic code at bank account flow

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.81-1 Reproducible in staging?: Y Reproducible in production?: N If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team

Issue found when executing PR https://github.com/Expensify/App/pull/38726

Action Performed:

1. Log in with a new Gmail account
2. Create a workspace
3. Enable "Workflows"
4. Navigate to Workflows - Connect bank account
5. Tap on "verify your account here"
6. Enter magic code

Expected Result:

The keyboard shouldn't flicker

Actual Result:

Keyboard is flickering when entering or deleting magic code at bank account flow for an unverified account. The text under is becomes visible for a very short time

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [x] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/750e57f4-7e3b-4038-8c8a-f3a5e115f86c

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bfdc76c99fb63dcf
• Upwork Job ID: 1800283124607224669
• Last Price Increase: 2024-06-26

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot[bot]]

Triggered auto assignment to @roryabraham (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

@roryabraham FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[roryabraham]

I've been seeing this one for a while, so I'm pretty sure it's not a deploy blocker. It is really annoying though.

[roryabraham]

I think there are some other preconditions we're missing that makes this happen, because I wasn't able to reproduce this on staging with my rory@expensify.com account. But I've seen it before.

[roryabraham]

It happens with some other TextInputs too... 🤔

[roryabraham]

It looks similar to this Flutter issue

edit: found the similar React Native issue: https://github.com/facebook/react-native/issues/39411

[roryabraham]

It sounds like the consensus in the community is that this is an iOS 17 issue, which is out of our hands.

[roryabraham]

We may be able to disable auto suggestions for the MagicCode input, by setting it to a oneTimePassword input, which seems appropriate. But I'm not sure if that will disable this autocompletion behavior (shows up after opening the email with the magic code)

Edit: Already has oneTimeCode

[roryabraham]

Since I'm pretty certain I've seen this in production, and I'm not consistently seeing it in staging, I'm going to demote it.

I'll make it external just in case I'm being too hasty in thinking that it's most likely an iOS bug, and someone has a simple idea to fix this.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[roryabraham]

On this issue I want to be particularly wary of hacks or workarounds. We don't need to make our code super complex to try and work around an iOS bug. Ideally that is fixed by Apple at some point soon

[TheGithubDev]

Proposal

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

The problem is that the keyboard flickers when entering or deleting the magic code in the bank account verification flow for an unverified account. This flickering causes the text underneath to become visible momentarily, disrupting the user experience.

What is the root cause of that problem?

The root cause of this problem is likely due to the input field losing and gaining focus repeatedly, causing the text to appear and disappear. This could be caused by:

1. Focus Handling: Improper handling of the input field focus events, potentially due to state changes or re-renders triggered by the input actions.
2. Animation or Transition: Unintended animations or transitions that affect the input field or the keyboard.

What changes do you think we should make in order to solve the problem? To address this issue without resorting to hacks or workarounds, we should focus on simplifying and stabilizing the code handling the input field:

1. Stabilize Focus Handling:

   • Ensure that the input field retains focus correctly during input actions by preventing unnecessary state changes and re-renders.

2. Optimize State Management:

   • Use a straightforward state management approach to avoid triggering re-renders that could cause the flickering.

3. Review and Adjust Animations:

   • Ensure there are no unintended animations or transitions affecting the input field.

Example of changes:

1. Stabilize Focus Handling:

   const handleFocus = () => {
       inputRef.current.focus();
   };

   return (
       <TextInput
           ref={inputRef}
           onFocus={handleFocus}
           onChangeText={handleInputChange}
           // Ensure other necessary props are included
       />
   );

2. Optimize State Management:

   const [magicCode, setMagicCode] = useState('');

   const handleInputChange = (text) => {
       setMagicCode(text);
   };

   return (
       <TextInput
           value={magicCode}
           onChangeText={handleInputChange}
           // Ensure other necessary props are included
       />
   );

3. Review and Adjust Animations:

   return (
       <View style={styles.inputContainer}>
           <TextInput
               value={magicCode}
               onChangeText={handleInputChange}
               // Ensure other necessary props are included
           />
       </View>
   );

What alternative solutions did you explore? (OPTIONAL)

We could implement a debounce mechanism for input changes to reduce the frequency of state updates and re-renders.

Please note that the above explanation outlines only the technical approach I plan to take. After getting accepted, I will submit the finalized solution as mentioned.

Thanks!

[melvin-bot[bot]]

@kevinksullivan, @abdulrahuman5196, @roryabraham Whoops! This issue is 2 days overdue. Let's get this updated quick!

[kevinksullivan]

@abdulrahuman5196 thoughts on the proposal above?

[melvin-bot[bot]]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot[bot]]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[kevinksullivan]

@MitchExpensify just looping in another BZ member while I am OOO Tuesday - Friday. Will keep it up once I return!

[MitchExpensify]

@abdulrahuman5196, friendly bump here on a proposal review

[abdulrahuman5196]

@TheGithubDev The proposal seems to be like a generalized good practice kind of information, I am not seeing solid Root cause analysis or solution. Can you update your proposal with solid RCA and solution? Or elaborate if I missed something.

[TheGithubDev]

Will definitely edit and reply. Thanks for the feedback.

[melvin-bot[bot]]

@kevinksullivan @MitchExpensify @abdulrahuman5196 @roryabraham 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!

[abdulrahuman5196]

No new proposal to review

[melvin-bot[bot]]

Upwork job price has been updated to $500

[kevinksullivan]

increasing price and still waiting on proposals.

[abzokhattab]

the issue is not reproducible on my side, am i missing any step?

https://github.com/Expensify/App/assets/59809993/1625bbe9-839b-4ad4-870c-bf28466689cb

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@kevinksullivan, @abdulrahuman5196, @roryabraham 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[kevinksullivan]

I also am unable to reproduce this using the same instructions. @lanitochka17 can you reliably reproduce this?

[kevinksullivan]

closing for now unless we can get reliable steps

[melvin-bot[bot]]

@kevinksullivan @roryabraham Be sure to fill out the Contact List!

[lanitochka17]

Issue is still reproducible on the latest build 9.0.4-7 Iphone 14 Pro Max/IOS17 The same steps

https://github.com/Expensify/App/assets/78819774/c2529b7d-626a-4447-867d-7d9b974e92dc

[melvin-bot[bot]]

@kevinksullivan @abdulrahuman5196 @roryabraham @lanitochka17 this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot[bot]]

@kevinksullivan, @abdulrahuman5196, @roryabraham, @lanitochka17 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot[bot]]

@kevinksullivan, @abdulrahuman5196, @roryabraham, @lanitochka17 Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot[bot]]

@kevinksullivan, @abdulrahuman5196, @roryabraham, @lanitochka17 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[kevinksullivan]

adding to collect since this is VBBA related

[roryabraham]

Ok, adding the retest-weekly label to keep an eye on this. We can accept other proposals here, but I'm not going to double this and instead we'll kind of wait-and-see if Apple fixes this.

[roryabraham]

I've noticed this across many different websites on my phone. Noticed it at least twice today on other sites.