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

[vincdargento]

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: 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): [email protected] Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Press CTRL + D to open troubleshoot modal
3. 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

[melvin-bot[bot]]

Triggered auto assignment to @OfstadC (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[FitseTLT]

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

What alternative solutions did you explore? (Optional)

[OfstadC]

I haven't' had a chance to review. Will look at this this weekend or first thing Monday morning

[OfstadC]

Can confirm this is reproducible - just need to sort which project it should fall under 😅

[OfstadC]

Chatted in Slack that this is likely not a priority - so Closing