[$2000] Toggle switch fails to toggle back when tapped again on preferences page

[kavimuru]

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. Open settings
2. Open preferences
3. tap on Toggle to ON/OFF

Expected Result:

Toggle switch should switch to ON/OFF when it is tapped again

Actual Result:

The toggle switch only works once and does not respond to subsequent taps

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome - Samsung SM-A315G Android 12
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: needs reproduction
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
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

20230824_214923.mp4

Expensify/Expensify Issue URL:
Issue reported by:@jo-ui
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692040308927449

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d30a31388a44c81c
• Upwork Job ID: 1696550383851593728
• Last Price Increase: 2023-12-19

[melvin-bot]

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

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

[strepanier03]

We don't have this Samsung phone type in Browserstack so I'm stuck on repro'ing. I raised this for discussion internally on a plan to move forward.

[jo-ui]

@strepanier03 It does not have to be the same phone just try it on android 12

[jo-ui]

@strepanier03 it is also reproducible on other android versions

[strepanier03]

Aaah, yeah I just realized I'm updated to Android 13 and so are our browserstack models. I am clarifying best practice and will move it forward then.

[strepanier03]

Ongoing discussion, I'll update as soon as I have consensus.

[strepanier03]

Since 68% of Android users are on Android 12 or lower, we want to fix this. Moving forward!

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[strepanier03]

Waiting for proposals Melvin.

[melvin-bot]

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

[melvin-bot]

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

[ShogunFire]

Proposal

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

The switches on preferences page are only working once

What is the root cause of that problem?

In Switch component we are using PressableWithFeedback, in the onPress method of PressableWithFeedback here:

App/src/components/Pressable/PressableWithFeedback.js

Line 76 in d447b95

singleExecution(() => props.onPress(e))();

We use the singleExecution hook which goal is to guarantee that we don't run the method twice if we press twice before the first method run hasn't finished.

In this hook here:

App/src/hooks/useSingleExecution.js

Lines 26 to 34 in d447b95

	InteractionManager.runAfterInteractions(() => {
	if (!(execution instanceof Promise)) {
	setIsExecuting(false);
	return;
	}
	execution.finally(() => {
	setIsExecuting(false);
	});
	});

We set isExecuting to false in the callback of InteractionManager.runAfterInteractions

The root cause is that in our case runAfterInteractions never fire the callback so isExecuting stays at true and onPress method is never called again.

The reason runAfterInteractions doesn't fire is because there is a lottie animation on the page and there is an issue here airbnb/lottie-web#3002 where the lottie animation prevents requestIdleCallback from firing, requestIdleCallback is used in runAfterInteractions for react-native-web here: https://github.com/necolas/react-native-web/blob/a3ea2a0a4fd346a1b32e6cef527878c8e433eef8/packages/react-native-web/src/exports/InteractionManager/index.js#L100-L108

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

One way is to fix Lottie so that requestIdleCallback is called, requestIdleCallback is not called because the animation constantly call requestAnimationFrame here: https://github.com/airbnb/lottie-web/blob/63a39aeb27b8c13726ce9fcf850d9351b14be3e6/player/js/animation/AnimationManager.js#L108

We could wait before requesting the frame for example like this:

setTimeout(function(){
    window.requestAnimationFrame(resume);
}, 42);

I think the best way would be to do this waiting only once in a while (for example every 100 times the method is called ) and only if the animation is a loop.

It works well.

What alternative solutions did you explore? (Optional)

We could use setDeadline of InteractionManager because using it allow to avoid using requestIdleCallback

The recommended way to use requestIdleCallback is to pass a parameter timeout to be sure that the callback will be called at some point, currently in react-native-web they don't use the timeout parameter

[ShogunFire]

It's hard to have a specific solution has long as we don't know in which cases runAfterInteractions was used, I will try to find the reason.

PS: I am almost sure that I was able to reproduce on windows chrome at some point during my tests but now I can't reproduce

[melvin-bot]

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

[thesahindia]

@ShogunFire, can we move forward now?

[strepanier03]

Friendly bump @ShogunFire, thanks!

[melvin-bot]

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

[strepanier03]

Still waiting for proposals, all good melvin.

[mvtglobally]

Issue not reproducible during KI retests. (third week)

[melvin-bot]

@strepanier03, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[strepanier03]

I'll test this again today or tomorrow.

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

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

[Tony-MK]

It seems to work on Andriod 10.
However, there is a problem with Android 12.

@strepanier03 Could you please retest this again?

[melvin-bot]

@strepanier03, @thesahindia 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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

[strepanier03]

Was out of the office. Working on this now.

[strepanier03]

Here's what I found:

• Physical device, a Pixel 6 Pro is on Android 14 - Can't reproduce
• Browserstack on a virtual Pixel 6 pro on Android 12 - Can't reproduce

@Tony-MK - Can you add a screencast of your repro and a bit more about your testing device so I can try to emulate your testing parameters?

[Tony-MK]

@strepanier03, Since you couldn't reproduce the bug on Android 12, could this other problem only apply to me?

Listed devices from left to right respectively:

1. Pixel 6 Pro - Android 13.0
2. Pixel 7 Pro - Android 12.0
3. Pixel 7 Pro - Android 12L
4. Pixel 6 - Android 12L

Staging

Production

[mvtglobally]

Issue not reproducible during KI retests. (Fourth week)

[strepanier03]

@Tony-MK - I guess it could be specific to you, but I'm not 100% sure.

I'll do another round of testing and if I still can't repro we can close this out until it becomes relevant again, at which point we can reopen.

[strepanier03]

Testing results

Android Chrome

• Physical Pixel 6 Pro, Android 14 - Chrome = No repro
• Virtual Samsung S23, Android 13 - Chrome = No repro
• Virtual Samsung S21, Android 12 - Chrome = No repro
• Virtual Samsung S21, Android 11 - Chrome = No repro
• Virtual Samsung S20 Ultra, Android 10 - Chrome = No repro

Okay, so I think at this point we close. I've tested on various Android versions and can't reproduce this any longer.

[Tony-MK]

Thanks a lot for the confirmation.