[$250] Edit per diem rates button is not responsive when Per diem tab is opened by swiping with cursor

[mitarachim]

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.1.97-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-349/folder/13177049/41237806/849025963
Email or phone of affected tester (no customers): sjisojsdnoisdjos@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Create a workspace.
3. Go to workspace settings > More features.
4. Enable Per diem.
5. Upgrade workspace when prompted.
6. Open FAB > Create expense.
7. Use cursor to swipe to Distance tab, then to Per diem tab.
8. Click Edit per diem rates.

Expected Result:

Edit per diem rates button will open Per diem page.

Actual Result:

Edit per diem rates button is not responsive when Per diem tab is opened by swiping with cursor.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6923646_1755849950424.Screen_Recording_2025-08-22_at_15.55.57.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021960547651103314341
• Upwork Job ID: 1960547651103314341
• Last Price Increase: 2025-10-29
• Automatic offers:
• aimane-chnaif | Contributor | 109346418

Issue Owner

Current Issue Owner: @Valforte

[melvin-bot]

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

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-09-12 14:14:10 UTC.

Proposal

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

Edit per diem rates button is not responsive when Per diem tab is opened by swiping with cursor

What is the root cause of that problem?

The button's onPress handler was wrapped in InteractionManager.runAfterInteractions(), which caused timing issues when the tab was accessed programmatically rather than through direct user interaction.

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Line 154 in 239ac5e

InteractionManager.runAfterInteractions(() => {

The logic was first introduced in this PR, however it was likely to be added by following the existing pattern seen in other parts of the codebase for "safe" navigation

https://github.com/Expensify/App/pull/54252/files#diff-c979a87a1f20182674201b96a286a881bf6ff0ef3708aebf5ad0888979c62255R136-R140

But InteractionManager.runAfterInteractions has a critical limitation: it only executes callbacks after "user-initiated" interactions complete. When the Per diem tab is accessed programmatically (via cursor swiping), the interaction manager doesn't recognize this as a completed user interaction, causing the callback to never execute

App/src/libs/Navigation/navigateAfterInteraction/index.ts

Lines 1 to 3 in 98010bc

	function navigateAfterInteraction(callback: () => void) {
	callback();
	}

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

We should remove InteractionManager.runAfterInteractions

It is safe to remove this case as there are no complex animations or modal transitions that would require interaction coordination in this page. We have many places are navigating without InteractionManager.runAfterInteractions such as in workspace settings, company cards settings,...

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

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Eskalifer1]

Proposal

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

Edit per diem rates button is not responsive when Per diem tab is opened by swiping with cursor

What is the root cause of that problem?

We use InteractionManager when clicking on the button:

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Lines 154 to 156 in 1a33bbc

	InteractionManager.runAfterInteractions(() => {
	Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM.getRoute(policy.id, Navigation.getActiveRoute()));
	});

But this page is located in OnyxTab, which, due to its internal implementation in the browser, behaves slightly differently than on native devices, causing a significant delay when switching between tabs via swipe. This can be seen in the URL, which immediately after the transition displays the PerDiem page, but the link is still at a distance

But we need a delay when pressing the button, because, considering what I wrote above, if we switch to the PerDiem tab by swiping and immediately press the button, we will take the backTo link not to the PerDiem page, but to the Distance page. And this is regression.

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

There are two ways to solve this problem:
The first option is more complicated, but it is accurate:

1. On the general page, add ref for perDiem, as well as a function for onTabSelect (this approach is used on the chat/group creation page):
   

   App/src/pages/iou/request/IOURequestStartPage.tsx

   Line 46 in 1a33bbc

   function IOURequestStartPage({

    const perDiemDestinationRef = useRef<IOURequestStepDestinationRef | null>(null);

    const onTabSelectFocusHandler = ({index}: {index: number}) => {
        // We runAfterInteractions since the function is called in the animate block on web-based
        // implementation, this fixes an animation glitch and matches the native internal delay
        InteractionManager.runAfterInteractions(() => {
            // 3 - PerDiem
            if (index === 3) {
                perDiemDestinationRef.current?.setIsPerDiemTabLoaded(true);
            } else {
                perDiemDestinationRef.current?.setIsPerDiemTabLoaded(false);
            }
        });
    };

2. Pass the functions to OnyxTabnavigator:

onTabSelect={onTabSelectFocusHandler}

3. Pass the ref itself:

ref={perDiemDestinationRef}

4. Add ref to the Destination page (don't forget about forwardRef):

export type IOURequestStepDestinationRef = {
    setIsPerDiemTabLoaded: (value: boolean) => void;
};

5. Add processing to the parent component:

    const [isTabLoaded, setIsTabLoaded] = useState(false);

    useImperativeHandle(ref, () => ({
        setIsPerDiemTabLoaded(value) {
            setIsTabLoaded(value);
        },
    }));

6. Disable the button until we load (I gave an example with blocking, but we may want to do something else, which can be discussed during the PR, Since I am proposing a general concept for solving the problem here):

isDisabled={!isTabLoaded}

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

N/A

What alternative solutions did you explore? (Optional)

1. We can use setTimeout for browser instead of InteractionManager and on native leave as it is now. We can create a separae hook for this(If this does not exist yet)

2. We can try not to take the active navigation path, but always pass the backTo parameter to this page.

3. Remove swipe for PC
   Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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