[Due for payment 2025-10-28] [$250] Expense - "More" returns to the previous modal when the Concierge categorize message appears

[jponikarchuk]

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.96-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): N/A
Issue reported by: Applause Internal Team
Device used: Windows 10 / Chrome, macOS Sequoia 15.5
App Component: Money Requests

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with a new Gmail account
3. Create a workspace
4. Open the workspace chat
5. Crate a manual expense without setting the category
6. Quickly navigate to the opened expense - More - Add expense

Expected Result:

The opened "Add expense" modal should be showing.

Actual Result:

"More" returns to the previous modal when the Concierge categorize message appears.

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021957572462392365837
• Upwork Job ID: 1957572462392365837
• Last Price Increase: 2025-09-22

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

Triggered auto assignment to @twisterdotcom (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]

Proposal

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

"More" returns to the previous modal when the Concierge categorize message appears

What is the root cause of that problem?

The issue was in the PopoverMenu component's useLayoutEffect that resets submenu state when menuItems prop changes.

Detailed flow:

1. User clicks "Add expense" in the "More" dropdown → navigates to submenu
2. User selects a Concierge categorize option → triggers report data update
3. Report data update causes applicableSecondaryActions to be recomputed in MoneyReportHeader
4. This changes the options prop passed to ButtonWithDropdownMenu
5. The menuItems prop in PopoverMenu changes, triggering the useLayoutEffect
6. The effect calls setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY) and setCurrentMenuItems(menuItems), resetting the submenu state back to the main menu

App/src/components/PopoverMenu.tsx

Lines 398 to 406 in 8622666

	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	setCurrentMenuItems(menuItems);
	// Update the focused item to match the selected item, but only when the popover is not visible.
	// This ensures that if the popover is visible, highlight from the keyboard navigation is not overridden
	// by external updates.
	if (isVisible) {
	return;
	}

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

Before:
Always reset sub-menu and reset to main menu

After:
Don't reset submenu state when the popover is visible to prevent returning to previous state when report data updates (e.g., when Concierge categorize messages appear)

        if (isVisible) {
            return;
        }

        setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
        setCurrentMenuItems(menuItems);

App/src/components/PopoverMenu.tsx

Lines 398 to 406 in 8622666

	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	setCurrentMenuItems(menuItems);
	// Update the focused item to match the selected item, but only when the popover is not visible.
	// This ensures that if the popover is visible, highlight from the keyboard navigation is not overridden
	// by external updates.
	if (isVisible) {
	return;
	}

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.

[samranahm]

Proposal

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

Expense - "More" returns to the previous modal when the Concierge categorize message appears

What is the root cause of that problem?

Currently useLayoutEffect resets currentMenuItems and enteredSubMenuIndexes on every render where menuItems changes, regardless of whether the popover is open. This overwrites the submenu state whenever any re-render happens while the submenu is active.

here

App/src/components/PopoverMenu.tsx

Lines 394 to 410 in 6e467dc

	useLayoutEffect(() => {
	if (menuItems.length === 0) {
	return;
	}
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	setCurrentMenuItems(menuItems);
	// Update the focused item to match the selected item, but only when the popover is not visible.
	// This ensures that if the popover is visible, highlight from the keyboard navigation is not overridden
	// by external updates.
	if (isVisible) {
	return;
	}
	setFocusedIndex(getSelectedItemIndex(menuItems));
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [menuItems, setFocusedIndex]);

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

we should only reset currentMenuItems and enteredSubMenuIndexes when the popover is not visible. it will prevents overwriting the submenu state during active state, so selecting a submenu item remain visible until the popover is closed.

useLayoutEffect(() => {
    if (menuItems.length === 0) {
        return;
    }

    // Only reset when the popover is not visible
    if (!isVisible) {
        setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
        setCurrentMenuItems(menuItems);

        // Update the focused item to match the selected item
        setFocusedIndex(getSelectedItemIndex(menuItems));
    }
}, [menuItems, isVisible, setFocusedIndex]);

here

App/src/components/PopoverMenu.tsx

Lines 394 to 410 in 6e467dc

	useLayoutEffect(() => {
	if (menuItems.length === 0) {
	return;
	}
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	setCurrentMenuItems(menuItems);
	// Update the focused item to match the selected item, but only when the popover is not visible.
	// This ensures that if the popover is visible, highlight from the keyboard navigation is not overridden
	// by external updates.
	if (isVisible) {
	return;
	}
	setFocusedIndex(getSelectedItemIndex(menuItems));
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [menuItems, setFocusedIndex]);

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)

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.

Results

chrome.popover.menu.mp4

[Eskalifer1]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-28 13:16:00 UTC.

Proposal

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

Expense - "More" returns to the previous modal when the Concierge categorize message appears

What is the root cause of that problem?

Currently, we always update the submenu items when menuItems change, and when we enter the page, we receive an openReport request, which gives us more information about the Report, resulting in changes to the menu items:

App/src/components/PopoverMenu.tsx

Lines 391 to 410 in c72a491

	// When the menu items are changed, we want to reset the sub-menu to make sure
	// we are not accessing the wrong sub-menu parent or possibly undefined when rendering the back button.
	// We use useLayoutEffect so the reset happens before the repaint
	useLayoutEffect(() => {
	if (menuItems.length === 0) {
	return;
	}
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	setCurrentMenuItems(menuItems);
	// Update the focused item to match the selected item, but only when the popover is not visible.
	// This ensures that if the popover is visible, highlight from the keyboard navigation is not overridden
	// by external updates.
	if (isVisible) {
	return;
	}
	setFocusedIndex(getSelectedItemIndex(menuItems));
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [menuItems, setFocusedIndex]);

This is the expected logic, since this submenu may no longer be present in the updated items.

UPDATE:
The problem lies in this part:

App/src/components/MoneyReportHeader.tsx

Lines 1089 to 1123 in 227c0c2

	const KYCMoreDropdown = (
	<KYCWall
	onSuccessfulKYC={(payment) => confirmPayment(payment)}
	enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
	isDisabled={isOffline}
	source={CONST.KYC_WALL_SOURCE.REPORT}
	chatReportID={chatReport?.reportID}
	iouReport={moneyRequestReport}
	anchorAlignment={{
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, // button is at left, so horizontal anchor is at LEFT
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
	}}
	>
	{(triggerKYCFlow, buttonRef) => (
	<ButtonWithDropdownMenu
	success={false}
	onPress={() => {}}
	onSubItemSelected={(item, index, event) => {
	if (!isSecondaryActionAPaymentOption(item)) {
	return;
	}
	onPaymentSelect(event, item.value, triggerKYCFlow);
	}}
	buttonRef={buttonRef}
	shouldAlwaysShowDropdownMenu
	shouldPopoverUseScrollView={shouldDisplayNarrowVersion && applicableSecondaryActions.length >= 5}
	customText={translate('common.more')}
	options={applicableSecondaryActions}
	isSplitButton={false}
	wrapperStyle={shouldDisplayNarrowVersion && [!primaryAction && styles.flex1]}
	shouldUseModalPaddingStyle
	/>
	)}
	</KYCWall>
	);

This DropDown is recreated every time the parent component is rendered, resulting in a useLayoutEffect call on each new render, which resets the value, and all memos lower down the tree do not work because it is a completely new element

This component is not wrapped in useCallback or exported as a separate component, but is created inside the parent component on each render. Since the component is created on every render, it is always a new function that has nothing to do with the previous one, so all states are reset, all useEffect and all useLayoutEffect are called, which in turn update certain logic, as in this case with useLayoutEffect, which leads to exiting the submenu. And since this is already a new Instance of the function with each change, all memos that are lower in the component tree, for example here:

App/src/components/PopoverMenu.tsx

Lines 466 to 482 in b278a73

	export default React.memo(
	PopoverMenu,
	(prevProps, nextProps) =>
	deepEqual(prevProps.menuItems, nextProps.menuItems) &&
	prevProps.isVisible === nextProps.isVisible &&
	deepEqual(prevProps.anchorPosition, nextProps.anchorPosition) &&
	prevProps.anchorRef === nextProps.anchorRef &&
	prevProps.headerText === nextProps.headerText &&
	prevProps.fromSidebarMediumScreen === nextProps.fromSidebarMediumScreen &&
	deepEqual(prevProps.anchorAlignment, nextProps.anchorAlignment) &&
	prevProps.animationIn === nextProps.animationIn &&
	prevProps.animationOut === nextProps.animationOut &&
	prevProps.animationInTiming === nextProps.animationInTiming &&
	prevProps.disableAnimation === nextProps.disableAnimation &&
	prevProps.withoutOverlay === nextProps.withoutOverlay &&
	prevProps.shouldSetModalVisibility === nextProps.shouldSetModalVisibility,
	);

are not executed, because it is always a new component.

There is also a problem with deepEqual, which I have already described below in the solution.

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

We need to add logic to check whether the new menu has this item with an open submenu, and if so, leave it open; if not, close the submenu.

To do this, we will create additional functions:

1. getItemKey - a simple function for obtaining the key that we will use for orientation

const getItemKey = (item: PopoverMenuItem) => item.key ?? item.text;

2. buildKeyPathFromIndexPath - A function for obtaining the submenu path by key from the first function:

    function buildKeyPathFromIndexPath(root: PopoverMenuItem[], indexPath: readonly number[]): string[] {
        const keys: string[] = [];
        let level: PopoverMenuItem[] | undefined = root;

        for (const idx of indexPath) {
            const node: PopoverMenuItem | undefined = level?.[idx];
            if (!node) break;
            keys.push(getItemKey(node));
            level = node.subMenuItems;
        }
        return keys;
    }

3. resolveIndexPathByKeyPath - A function in which we search for a submenu item by the path generated in the previous function in the new array. If such a path exists, we consider that the submenu is in the new array and do not close it. If there is no path, we close the submenu:

    function resolveIndexPathByKeyPath(root: PopoverMenuItem[], keyPath: string[]) {
        let level: PopoverMenuItem[] = root;
        const indexes: number[] = [];

        for (const key of keyPath) {
            const i = level.findIndex((n) => getItemKey(n) === key);
            if (i === -1) {
                return {found: false as const};
            }
            indexes.push(i);
            const next = level[i].subMenuItems;
            level = next ?? [];
        }
        return {found: true as const, indexes, itemsAtLeaf: level};
    }

Add prevMenuItems:
const prevMenuItems = usePrevious(menuItems);

useLayoutEffect:

    useLayoutEffect(() => {
        if (menuItems.length === 0) {
            return;
        }

        const keyPath = buildKeyPathFromIndexPath(prevMenuItems ?? menuItems, enteredSubMenuIndexes);
        console.log(keyPath, "keyPath")

        if (keyPath.length === 0) {
            setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
            setCurrentMenuItems(menuItems);
            if (!isVisible) {
                setFocusedIndex(getSelectedItemIndex(menuItems));
            }
            return;
        }

        const resolved = resolveIndexPathByKeyPath(menuItems, keyPath);

        if (resolved.found) {
            setEnteredSubMenuIndexes(resolved.indexes);
            setCurrentMenuItems(resolved.itemsAtLeaf);
            if (!isVisible) {
                setFocusedIndex(getSelectedItemIndex(resolved.itemsAtLeaf));
            }
        } else {
            setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
            setCurrentMenuItems(menuItems);
            if (!isVisible) {
                setFocusedIndex(getSelectedItemIndex(menuItems));
            }
        }

        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, [menuItems, setFocusedIndex]);

UPDATE:

We need to use the main solution I suggested above, as well as:

1. Add a check in useLayoutEffect using JSOn.stringify to see if the elements have changed
2. Replace this line in memo if necessary:
   

   App/src/components/PopoverMenu.tsx

   Line 469 in 227c0c2

   deepEqual(prevProps.menuItems, nextProps.menuItems) &&

   
   On (Or add another check, this can be discussed during the PR stage):

 JSON.stringify(prevProps.menuItems) === JSON.stringify(nextProps.menuItems)

3. Wrap this component in useCallback with dependencies so that it is not re-rendered unnecessarily, or move it to a separate component that will be wrapped in memo:
   

   App/src/components/MoneyReportHeader.tsx

   Lines 1089 to 1123 in 227c0c2

   	const KYCMoreDropdown = (
   	<KYCWall
   	onSuccessfulKYC={(payment) => confirmPayment(payment)}
   	enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
   	isDisabled={isOffline}
   	source={CONST.KYC_WALL_SOURCE.REPORT}
   	chatReportID={chatReport?.reportID}
   	iouReport={moneyRequestReport}
   	anchorAlignment={{
   	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, // button is at left, so horizontal anchor is at LEFT
   	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
   	}}
   	>
   	{(triggerKYCFlow, buttonRef) => (
   	<ButtonWithDropdownMenu
   	success={false}
   	onPress={() => {}}
   	onSubItemSelected={(item, index, event) => {
   	if (!isSecondaryActionAPaymentOption(item)) {
   	return;
   	}
   	onPaymentSelect(event, item.value, triggerKYCFlow);
   	}}
   	buttonRef={buttonRef}
   	shouldAlwaysShowDropdownMenu
   	shouldPopoverUseScrollView={shouldDisplayNarrowVersion && applicableSecondaryActions.length >= 5}
   	customText={translate('common.more')}
   	options={applicableSecondaryActions}
   	isSplitButton={false}
   	wrapperStyle={shouldDisplayNarrowVersion && [!primaryAction && styles.flex1]}
   	shouldUseModalPaddingStyle
   	/>
   	)}
   	</KYCWall>
   	);

There is also a problem with deepEqual, as it treats functions and components inside an element as different values. As a result, if an element had the same value before and after but has a function (as in this case) or a component inside it, deepEqual will return false, which will cause it to be considered as different values and useLayoutEffect will be called. JSON.stringify removes functions and components from values, so it will return true in cases where deepEqual returns false for the reasons described above (if there is a function in the project that already has this functionality, we can use it).

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)

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]

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

[melvin-bot]

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

[twisterdotcom]

Following my advice here: #63663 (comment).

This appears to be an exploitative bug, not one linked to a PR, regression test or customer report, so likely closing.

[samranahm]

This bug also appear when any dependency change in Report Screen and it make the bad UX we should resolve it.