[HOLD for payment 2024-02-14] [$500] [Wave 5] [ECard Settings] App crashes when pressing back button when activating physical expensify card

[kavimuru]

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

---

Version Number:
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
Expensify/Expensify Issue URL:
Issue reported by: @mountiny
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1705661461207919

Action Performed:

Prerequisites:

• Have a physical card to activate
• Alternatively (if on dev) you can add this effect to WalletPage.js to create a mock card:

1. Navigate to the WalletPage
2. Navigate to Expensify Card
3. Click the Activate physical card button
4. The native keyboard is necessary for reproduction but it will be closed by default, to enable it you have to manually focus some digit of the activation code (e.g. the 4th one), that should toggle the native keyboard
5. Once the native keyboard is toggled, dismiss it by pressing anywhere on the screen
6. Once it’s dismissed press the < button on the screen keyboard (the custom one)

Expected Result:

App should not crash

Actual Result:

App crashed

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a4febea3f9721613
• Upwork Job ID: 1749410465588416512
• Last Price Increase: 2024-01-26
• Automatic offers:
• DylanDylann | Reviewer | 28131636
• akinwale | Contributor | 28131637

[melvin-bot]

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

[akinwale]

Is there a video of the test steps to reproduce the bug?

[akinwale]

Proposal

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

The app crashes if a user presses the Backspace button on the Big Number Pad (BNP) after dismissing the soft keyboard on a native device.

What is the root cause of that problem?

Tapping anywhere to dismiss the soft keyboard causes the MagicCodeInput to lose focus, thereby calling setFocusedIndex(undefined); to null in the onBlur handler.

App/src/components/MagicCodeInput.js

Line 390 in 1d21e28

setFocusedIndex(undefined);

Upon the next press of the Backspace button, we're trying to focus on a non-existent ref which triggers the error.

App/src/components/MagicCodeInput.js

Line 280 in 1d21e28

inputRefs.current[indexToFocus].focus();

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

Solution 1
Check that the indexToFocus is not undefined before calling the focus method in MagicCodeInput.

+if (!indexToFocus) {
+    return;
+}
inputRefs.current[indexToFocus].focus();

Solution 2
Ensure that the MagicCodeInput is focused before dispatching a key press from the BNP.

We can do this in the updateLastPressedDigit callback in ActivatePhysicalCardPage.

App/src/pages/settings/Wallet/ActivatePhysicalCardPage.js

Line 101 in 1d21e28

const updateLastPressedDigit = useCallback((key) => setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key), [lastPressedDigit]);

-const updateLastPressedDigit = useCallback((key) => setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key), [lastPressedDigit]);
+const updateLastPressedDigit = useCallback((key) => {
+    if (activateCardCodeInputRef.current) {
+       activateCardCodeInputRef.current.focus();
+    }
+    setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key);
+    
+}, [lastPressedDigit]);

Note that this will also cause the soft keyboard to be displayed again every time the input regains focus, so we would need to add a ref to check if the soft keyboard has already been dismissed to prevent it from being shown again while the screen is still active.

What alternative solutions did you explore? (Optional)

None.

[akinwale]

Proposal

Updated

[situchan]

Seems like the same root cause as #18874

[akinwale]

Seems like the same root cause as #18874

Yeah, looks like it. However, the underlying cause of that issue was fixed. This is triggered due to expected user action.

[melvin-bot]

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

[melvin-bot]

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

[DylanDylann]

@akinwale Could you reproduce this issue? I can't reproduce anymore

Screen.Recording.2024-01-29.at.23.49.17.mov

[akinwale]

@akinwale Could you reproduce this issue? I can't reproduce anymore

You need to press the Backspace button on the number pad to reproduce, not the back navigation button.

[DylanDylann]

@akinwale Could you help to point out Backspace button on the number pad? I also try it in the physical device and don't see Backspace button on the number pad

[akinwale]

@DylanDylann Circled in red.

[DylanDylann]

@akinwale In the PR phrase, could you also find out other places that also use the number pad? And verify that similar bugs also be fixed.

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[grgia]

All yours @akinwale!

[akinwale]

@DylanDylann My PR is ready for review.

[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.4.37-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: prevent crash on Backspace press when magic input is not focused #35454

If no regressions arise, payment will be issued on 2024-02-14. 🎊

For reference, here are some details about the assignees on this issue:

• @akinwale requires payment automatic offer (Contributor)
• @DylanDylann requires payment automatic offer (Reviewer)

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

• [@akinwale / @DylanDylann] The PR that introduced the bug has been identified. Link to the PR:
• [@akinwale / @DylanDylann] 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:
• [@akinwale / @DylanDylann] 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:
• [@akinwale / @DylanDylann] Determine if we should create a regression test for this bug.
• [@akinwale / @DylanDylann] 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.
• [] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[DylanDylann]

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:

[@DylanDylann] The PR that introduced the bug has been identified. Link to the PR: NA
[@DylanDylann] 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: NA
[@DylanDylann] 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: NA
[@DylanDylann] Determine if we should create a regression test for this bug. Yes
[@DylanDylann] 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.

Regression Test Proposal

1. Launch the Expensify app.
2. Navigate to the Wallet page.
3. Click or tap on the Activate physical card button.
4. Dismiss the soft keyboard that is shown so that the magic code input loses focus. (The soft keyboard showing up and getting dismissed is a required step for the test).
5. Press the Backspace button at the bottom right of the BNP.
6. Verify that the app does not crash.

Do we agree 👍 or 👎

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @greg-schroeder you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[greg-schroeder]

Paid, filed regression test, closing