[HOLD for payment 2023-05-16] [$4000] Web - Inputs are "Flickering" in VBA flow when clicked on

[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. Click on Profile > Workspace > Connect to bank
4. Proceed with flow until you reach the "Date" section
5. Click on the date input fields

Expected Result:

User expects the button to be clicked on with no flickering

Actual Result:

There is an excess in flickering. This is true for all inputs, but is most noticeable on the date picker.

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

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

Bug5982271_Blinking.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team, @priya-zha
Edit: initial reporter was @priya-zha
Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e873c415a8f0c195
• Upwork Job ID: 1637836384901492736
• Last Price Increase: 2023-04-18

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[puneetlath]

Confirmed this is happening. Opening up for external.

[tienifr]

Proposal

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

There's flickering when user clicks on the DatePicker.

What is the root cause of that problem?

The root cause is this hack which makes the input opacity become 0 for 0.01s, causing the flickering.

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

Since the hack was to fix the mobile scrolling issue on iOS mWeb (explanation here). We can make the hack more specific and only adds the css for the hack if we're on mWeb (by checking isSmallScreenWidth and on web for example). This will fix this date picker flickering issue on desktop browsers (& Desktop).

Since on mWeb the date picker will open the native picker, the hack will not cause this date picker flickering issue on mWeb.

What alternative solutions did you explore? (Optional)

I could not find a straight forward way to fix these issues. So I looked around for other projects where these issues are already addressed. I came across Adobe's react-spectrum
https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts

We could also remove that hack and add another better, proven hack from the react-spectrum as mentioned here. The code for it is already there, we can adapt it to our codebase (although will be a bit complicated).

Another solution is to add the hack only if the input does not have type="date". This will make sure the date input is not impacted by the hack.

[s77rt]

@puneetlath Do you think we should hold this one? The VBA flow will be refactored to use the new date picker however I have no ETA and no tracking issue seems to be created yet. Just asking to be sure here.

[s77rt]

@tienifr Thanks for the proposal. Your RCA seems about right but you didn't explain why this behavior is more noticeable on date input more than any other input (other inputs are effected too). Putting that aside, you proposed 3 fixes:

1. Excluding web. This will make the issue still reproducible on mWeb right?
2. Replacing a hack with another hack does not seem worth it as the other hack may have negative impacts that will lead to other issues similar to this one.
3. Excluding date input bring the question about the missing piece of the RCA, why this is only most noticeable on date inputs.

[puneetlath]

Will the existing date picker be completely replaced? If so, it probably makes sense to close this.

[s77rt]

Yes it will be replaced by the same one you can see here http://localhost:8080/settings/profile/personal-details/date-of-birth However the flickering effect is for every input and not just the date input (it's not very noticeable on other inputs). How should we handle this?

1. Fix the flickering for every input
2. Fix the flickering for date input only since it's the only one that is too noticeable
3. Something else?

[tienifr]

Excluding web. This will make the issue still reproducible on mWeb right?

@s77rt Since on mWeb the date picker will open the native picker, the hack will not cause this date picker flickering issue on mWeb.

It's only on Desktop browsers that we can click (and focus) on the date input repeatedly and sees the flickering.

[hellohublot]

Proposal

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

Web - Verify Bank Account - Calendar icons are "Flickering" in VBA flow when clicked on

What is the root cause of that problem?

#15100

App/web/index.html

Lines 53 to 60 in 9fdc940

	@keyframes blink_input_opacity_to_prevent_scrolling_when_focus {
	0% { opacity: 0; }
	100% { opacity: 1; }
	}
	input:focus-visible, input:focus[data-focusvisible-polyfill],
	select:focus-visible, select:focus[data-focusvisible-polyfill] {
	box-shadow: none;
	animation: blink_input_opacity_to_prevent_scrolling_when_focus 0.01s;

This PR prohibits the automatic scrolling of the scrollView by temporarily hiding the input after it is selected, but if an input box is a date type, then when it is selected, it can still respond to focus-visible multiple times , so this animation executes multiple times, it causing flickering

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

We can use focus-within to replace focus-visible to simply avoid multiple animations, because this event will not respond repeatedly

What alternative solutions did you explore? (Optional)

1. Add a mWebSafari class to the html tag, then we can use html > to filter and only do hidden animations on the iOS safari platform
2. Fix: iOS button obstructed by keyboard #14392 and Fix: iOS autoscroll when <input/> is focused #15100 maybe both cause a little problem
   The scrollView and input on the mobile platform always cause repeated problems, maybe we can open a larger issue for everyone to discuss

[s77rt]

@tienifr Thanks for the confirmation, but I think I'd rather do nothing than exclude Web. Since the date input will be replaced soon.

[s77rt]

@hellohublot Thanks for the proposal. Your RCA is correct and the fix is very light-weight and effective. Can you confirm that the original issue #14716 is still getting fixed with your suggested change?

[s77rt]

@puneetlath Based on #16017 I think we want to fix the flicker effect for every input and by doing so we will have to remove the hack introduced by #15100 Can you please confirm the same (and address #16082 (comment))

[hellohublot]

@s77rt #14716 Yes. I tested it again. Of course it can work just as well

[s77rt]

@cubuspl42 Can you please confirm that WorkspaceInviteMessagePage also works fine without the hack.

[cubuspl42]

@s77rt It is. I checked. I mean, it's working the same. The hack never touched textarea

[s77rt]

@cubuspl42 Right, just wanted to double check to avoid any misunderstanding 😅. Let's get this fixed then 🚀!

🎀 👀 🎀 C+ reviewed

cc @puneetlath

[cubuspl42]

There was a mistake in my list, WorkspaceInviteMessagePage does not use shouldEnableMaxHeight, it's WorkspaceInvitePage

[cubuspl42]

@s77rt I think it's time to start wrapping this, as the PR is merged 🚀

[s77rt]

@cubuspl42 We have nothing to do 😅. Just wait till PR hit production and after 7 regression-free days payment should be processed.

[cubuspl42]

Oh, ok

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.12-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Remove the blink_input_opacity_to_prevent_scrolling_when_focus hack #18266

If no regressions arise, payment will be issued on 2023-05-16. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter @priya-zha
• Contributor that fixed the issue @cubuspl42
• Contributor+ that helped on the issue and/or PR @s77rt

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@s77rt] The PR that introduced the bug has been identified. Link to the PR: Fix: iOS autoscroll when <input/> is focused #15100
• [@s77rt] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Fix: iOS autoscroll when <input/> is focused #15100 (comment)
• [@s77rt] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: https://expensify.slack.com/archives/C049HHMV9SM/p1683634838980279
• [@s77rt] Determine if we should create a regression test for this bug. No, see below
• [@s77rt] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. n/a
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: n/a

[s77rt]

• The PR that introduced the bug has been identified: Fix: iOS autoscroll when <input/> is focused #15100
• The offending PR has been commented on: Fix: iOS autoscroll when <input/> is focused #15100 (comment)
• A discussion in #expensify-bugs has been started: https://expensify.slack.com/archives/C049HHMV9SM/p1683634838980279
• Determine if we should create a regression test for this bug: It feels like we introduced the flickering behaviour on purpose, so I don't think we need a regression test for this one.

[puneetlath]

Thanks @s77rt. Checklist is done.

Sent all three of you contract offers.

[cubuspl42]

@puneetlath How does the bonus payment work? Is it provided as a separate Upwork offer?

[puneetlath]

It'll be provided as part of the payment on the existing offer. I'll just add it as a bonus when I make the payment. (assuming there are no regressions between now and May 16th when I pay).

[puneetlath]

All paid. Thanks everyone!