Troubleshoot - Double clicking/tapping outside of troubleshoot modal reopens the modal

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.

MIT License

3.67k stars 2.93k forks source link

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: 9.0.71-0 Reproducible in staging?: Yes Reproducible in production?: Yes If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): nathanmulugetatesting+2337@gmail.com Issue reported by: Applause Internal Team

Action Performed:

Navigate to staging.new.expensify.com
Press CTRL + D to open troubleshoot modal
Double click outside of the modal

Expected Result:

The modal closes

Actual Result:

The modal closes and reopens again

Workaround:

Unknown

Platforms:

[x] Android: Standalone
[x] Android: HybridApp
[x] Android: mWeb Chrome
[x] iOS: Standalone
[x] iOS: HybridApp
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/54a4e442-9c04-473b-a4d7-10fb22ba3cf7

View all open jobs on GitHub

Edited by proposal-police: This proposal was edited at 2024-12-04 18:44:16 UTC.

Proposal

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

Troubleshoot - Double clicking/tapping outside of troubleshoot modal reopens the modal

What is the root cause of that problem?

We are already throttling the function here to avoid repeated calls in the timeout period https://github.com/Expensify/App/blob/146204878d1b9d4358d91e9a0a81169a7819d96f/src/libs/actions/TestTool.ts#L28 but the problem is we throttled and defined the function inside the toggleTestToolsModal function so it is being instantiated on every call so the throttling not working

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

We need to do the throttling outside the function

const toggle = () => {
    const toggleIsTestToolsModalOpen = () => {
        Onyx.set(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN, !isTestToolsModalOpen);
    };

    if (!isTestToolsModalOpen) {
        Modal.close(toggleIsTestToolsModalOpen);
        return;
    }
    toggleIsTestToolsModalOpen();
};
const throttledToggle = throttle(toggle, CONST.TIMING.TEST_TOOLS_MODAL_THROTTLE_TIME, {leading: true, trailing: false});

/**
 * Toggle the test tools modal open or closed.
 * Throttle the toggle to make the modal stay open if you accidentally tap an extra time, which is easy to do.
 */
function toggleTestToolsModal() {
    throttledToggle();
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We can call toggleTestToolsModal twice and assert our mock to toggle function toHaveBeenCalledTimes once. 👍

Expensify / App