[$1000] mWeb - Connect Bank Account - When navigating through fields in VBA, the information is "flashing"

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Access staging.new.expensify.com
2. Sign into a valid account
3. Go to Profile > Workspace > Connect a bank account (Select any option)
4. Tap on any input field and then tap off of it

Expected Result:

User expects the transition to be smooth and keep scrolling with all information visible

Actual Result:

The information is "Flashing" and this leads to the information disappearing and reappearing a couple of seconds later

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

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

Bug5979028_Information_if_flashing_when_opening_and_closing_the_keyboard.mp4

Bug5979028_Information_is_temporarily_dissapearing_.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/~017d4009b57b77841b
• Upwork Job ID: 1639300600370114560
• Last Price Increase: 2023-04-06

[MelvinBot]

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

[alexpensify]

Catching up from being OOO and urgent bank GHs, I'll try to get to this one by EOW.

[alexpensify]

Ops GHs have been a higher priority, I haven't had time to test yet.

[alexpensify]

Focused on another urgent task, I'll try to get to this one tomorrow.

[MelvinBot]

Triggered auto assignment to @stitesExpensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[alexpensify]

@stitesExpensify - I don't have an iPhone and can't replicate on the website. Let me know if you need me to find someone in the BZ to test. I assigned engineering since I'm not sure if this will be internal or external. Thanks for the feedback.

[alexpensify]

@stitesExpensify - I asked for help here because you are offline this week:

https://expensify.slack.com/archives/C01SKUP7QR0/p1679525137462479

[MelvinBot]

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

[alexpensify]

@conorpendergrast - I need to reassign the bug label since I will be OOO until April 3. I need help looking for any Bug team tasks when I'm offline. If it's still open when I return online, I have a reminder to self-reassign back to me.

[conorpendergrast]

Replied here that you can test iOS via Browserstack (this SO)!

[conorpendergrast]

Tested and reproduced via iOS Safari 👍

I suspect that this might be Internal because it's the VBA form, so I'll start there. Please correct me if that's wrong!

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~017d4009b57b77841b

[MelvinBot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @mollfpr (Internal)

[mollfpr]

The header not being displayed on localhost is not a regression, that has always been the behaviour prior to the fix in this proposal. The header only displays on staging.new.expensify.com or new.expensify.com.

The header what mean is the component HeaderWithCloseButton that shows the page title and the back button.

[mollfpr]

In the video, I attach here. With your solution, when I'm scrolling to the bottom of the page I need to drag it hard to see the submit button but the header component is scrolled up and out of sight. I need to scroll up hard to see the header component again. It's not happening in the staging.

[akinwale]

In the video, I attach here. With your solution, when I'm scrolling to the bottom of the page I need to drag it hard to see the submit button but the header component is scrolled up and out of sight. I need to scroll up hard to see the header component again. It's not happening in the staging.

I see this now. Investigating.

[akinwale]

flex

In the video, I attach here. With your solution, when I'm scrolling to the bottom of the page I need to drag it hard to see the submit button but the header component is scrolled up and out of sight. I need to scroll up hard to see the header component again. It's not happening in the staging.

I see this now. Investigating.

@mollfpr There's something weird going on here with the KeyboardAvoidingView. I'll need some more time to investigate.

[akinwale]

@mollfpr

This actually appears to be a problem with Safari on iOS. I used the Web Inspector to check the elements, and it appears that iOS Safari inserts some extra space above the keyboard, which pushes the top level <html> element further up (thereby causing the header to be moved out of the viewport). All of the displayed input fields are still visible, however and when the soft keyboard closes, everything resets back to normal.

https://stackoverflow.com/questions/70572209/white-space-outside-html-on-mobile-safari-when-keyboard-is-open
https://stackoverflow.com/questions/52857694/safari-on-ios-scrolls-beyond-html-element-when-virtual-keyboard-is-opened

If you wish to inspect the HTML, launch the web app in the simulator. Open Safari on your Mac, and if you don't have a Develop menu, navigate to Preferences > Advanced, and enable the "Show Develop menu in menu bar" option. Then click Develop in the menu bar, select the corresponding simulator in the list and then select the page title to open the Web Inspector. Select Elements and observe the selections when the soft keyboard is open and the page is scrolled all the way to the end.

I haven't been able to find a hack or workaround that fixes this behaviour.

[mollfpr]

This actually appears to be a problem with Safari on iOS. I used the Web Inspector to check the elements, and it appears that iOS Safari inserts some extra space above the keyboard, which pushes the top level element further up (thereby causing the header to be moved out of the viewport). All of the displayed input fields are still visible, however and when the soft keyboard closes, everything resets back to normal.

@akinwale Is this with the maxHeight prop removed?

[akinwale]

This actually appears to be a problem with Safari on iOS. I used the Web Inspector to check the elements, and it appears that iOS Safari inserts some extra space above the keyboard, which pushes the top level element further up (thereby causing the header to be moved out of the viewport). All of the displayed input fields are still visible, however and when the soft keyboard closes, everything resets back to normal.

@akinwale Is this with the maxHeight prop removed?

Yes, this is correct.

[mollfpr]

Fixing the iOS Safari issue is always tricky 😬. I am still in favor of keeping the current scroll behavior where it is not easy to make the header component out of sight. Could you take a look at another solution @akinwale?

[akinwale]

@mollfpr I'll keep exploring, but it's gonna be a bit difficult. I'll post an update if I find a solution.

[MelvinBot]

@conorpendergrast @mollfpr @stitesExpensify 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!

[MelvinBot]

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

[alexpensify]

@stitesExpensify and @mollfpr - I'm taking over from Conor. I wanted to get your feedback on the proposals and if there is one that will run with here. Thanks!

[alexpensify]

This is an edge case, so I'll start a discussion next week about the next steps.

[alexpensify]

Not overdue

[mollfpr]

Sorry for the late response @alexpensify 🙏

The summarize for the last proposal is here. It fixes this issue but introduces a regression, so it is not perfect, or we can probably tweak something from there to find the best approach.

[alexpensify]

@mollfpr - do you think we should try to prevent the issues before regression or move forward with the proposal then deal with the issues after? Thanks for reviewing.

[bernhardoj]

We have a PR #16443 which basically has the same idea as @akinwale which means this #15991 (comment) will soon happen after the PR is merged.

[alexpensify]

@mollfpr and @stitesExpensify - with this news, do y'all agree to close this one since the fix is on the way? 👍🏼

[thesahindia]

We can close this. As mentioned by @bernhardoj, it will be fixed after #16443

[mollfpr]

@alexpensify Yes! Seems fixed but the other regression might appear.

[alexpensify]

Alright, thank you everyone for the feedback. I'm closing this GH.