Web - Unable to dismiss Switch to Expensify Classic RHP via ESC key after refreshing the page

[lanitochka17]

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.22-0 Reproducible in staging?: Y Reproducible in production?: Y 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): applausetester+kh050806@applause.expensifail.com Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Account settings
3. Click Switch to Expensify Classic
4. Dismiss the RHP via ESC key
5. Note that the RHP can be dismissed via ESC key
6. Refresh the page
7. Click Switch to Expensify Classic
8. Press ESC key

Expected Result:

Switch to Expensify Classic RHP can be dismissed via ESC key after refreshing the page

Actual Result:

Switch to Expensify Classic RHP cannot be dismissed via ESC key after refreshing the page

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/62f146f5-a6e8-4cb5-bb7a-1d4ea849e6ff

View all open jobs on GitHub

[melvin-bot[bot]]

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

[lanitochka17]

@strepanier03 FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[daledah]

Proposal

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

Switch to Expensify Classic RHP cannot be dismissed via ESC key after refreshing the page

What is the root cause of that problem?

We subscribe to the 'Esc' key to close the RHN modal in this code. However, after refreshing the page, the event listener is not re-subscribed because the SidebarLinks component isn't reopened.

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

We should move that event listener to other position like this

    useEffect(() => {
        const unsubscribeOnyxModal = onyxSubscribe({
            key: ONYXKEYS.MODAL,
            callback: (modalArg) => {
                if (modalArg === null || typeof modalArg !== 'object') {
                    return;
                }
                modal.current = modalArg;
            },
        });

        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
        const unsubscribeEscapeKey = KeyboardShortcut.subscribe(
            shortcutConfig.shortcutKey,
            () => {
                if (modal.current.willAlertModalBecomeVisible) {
                    return;
                }
                if (modal.current.disableDismissOnEscape) {
                    return;
                }
                Navigation.dismissModal();
            },
            shortcutConfig.descriptionKey,
            shortcutConfig.modifiers,
            true,
            true,
        );

        return () => {
            if (unsubscribeEscapeKey) {
                unsubscribeEscapeKey();
            }
            if (unsubscribeOnyxModal) {
                unsubscribeOnyxModal();
            }
        };
        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, []);

What alternative solutions did you explore? (Optional)

We can add the event listener in there or there.

[bernhardoj]

Same issue as https://github.com/Expensify/App/issues/46915

[strepanier03]

Closing in favor of #46915 which is two weeks old.