Invoices - Unable to select payment option in the dropdown in expense preview in the main chat

lanitochka17 commented 19 hours ago

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.50-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A 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+kh081006@applause.expensifail.com Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
[User A] Send an invoice to User B
[User B] Go to invoice chat
[User B] Click on the pay button dropdown in the preview in the main chat (not the thread)
[User B] Select any option

Expected Result:

User will be able to select payment option from the dropdown

Actual Result:

User is unable to select payment option from the dropdown. App does not proceed after selecting any option from the dropdown

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/888e47a3-5b9b-4ed7-a052-629ce9305f98

View all open jobs on GitHub

melvin-bot[bot] commented 19 hours ago

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.

lanitochka17 commented 19 hours ago

@OfstadC 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

lanitochka17 commented 19 hours ago

We think that this bug might be related to #vip-bills

abzokhattab commented 17 hours ago

Edited by proposal-police: This proposal was edited at 2024-10-17 15:38:53 UTC.

Proposal

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

Invoices - Unable to select payment option in the dropdown in expense preview in the main chat

What is the root cause of that problem?

In the ReportPreview component, when users click on options in the SettlementButton that have submenus, the submenu fails to display properly. Instead, the popover menu blinks

The issue occurs because the menuItems prop passed to the PopoverMenu component changes on every render due to unstable function references. Specifically:

In SettlementButton, the onOptionSelected function changes on every render because it's recreated each time without memoization.
In ButtonWithDropdownMenu, the menuItems array is recreated on every render because it depends on onOptionSelected and options, which are changing references. This causes the PopoverMenu to reset its internal state on each render, preventing the submenu from displaying correctly.

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

Memoize menuItems in ButtonWithDropdownMenu:
- Use useMemo to memoize the menuItems array, ensuring it only changes when options or onOptionSelected change.
- This prevents unnecessary re-renders and state resets in PopoverMenu.

// In ButtonWithDropdownMenu.js
const menuItems = useMemo(
    () =>
        options.map((item, index) => ({
            ...item,
            onSelected: item.onSelected
                ? () => item.onSelected?.()
                : () => {
                      onOptionSelected?.(item);
                      setSelectedItemIndex(index);
                  },
            shouldCallAfterModalHide: true,
        })),
    [options, onOptionSelected],
);

Memoize onOptionSelected in SettlementButton:
- Use useCallback to memoize the onOptionSelected function in SettlementButton, ensuring it has a stable reference.
- This prevents onOptionSelected from changing on every render, which stabilizes the menuItems prop.

// In SettlementButton.js
const onOptionSelected = useCallback(
    (option) => {
        if (policyID === '-1') {
            return;
        }
        savePreferredPaymentMethod(policyID, option.value);
    },
    [policyID],
);

By making these changes, we stabilize the menuItems prop passed to PopoverMenu, which prevents it from resetting its state and allows submenus to display correctly.

POC

https://github.com/user-attachments/assets/4e8970dc-424c-43b7-9e85-d1efc4b342f0

Expensify / App