Expense - Payment option is not selected from the dropdown unless it is reselected

[IuliiaHerets]

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.36-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Email or phone of affected tester (no customers): applausetester+watashiwastar2@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Workspace has set up bank account.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit an expense.
4. On the main chat, click on the payment dropdown button.
5. Select the other payment option.
6. Click on the payment dropdown button.
7. Select the other payment option again.

Expected Result:

The payment option will be selected without issue.

Actual Result:

The payment option is not selected until it is selected for the second time.
On Android and iOS app, the payment option is selected without issue during the first attempt, but it reverts to the previous option when opening dropdown and dismissing the modal.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6606369_1726563197027.20240917_164453.mp4

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @mountiny (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 2

[grgia]

potentially related to #48863 @shubham1206agra

[mountiny]

Reproducible in production?: N/A - new feature, doesn't exist in prod

Interesting, this does not feel like a new feature

[shubham1206agra]

Culprit PR is #48615. @bernhardoj

[trjExpensify]

Thread here, I think Bernhard is out of action, so we need someone to jump on this. @ZhenjaHorbach perhaps as you have the context from the review?

[ZhenjaHorbach]

Thread here, I think Bernhard is out of action, so we need someone to jump on this. @ZhenjaHorbach perhaps as you have the context from the review?

Sure !
I can check in an hour !

[ZhenjaHorbach]

Hmmmm
Actually this issue is related with these changes

#48615 (review)

Since we updated dependencies we update list sorting it according to this condition every time

App/src/components/SettlementButton/index.tsx

Lines 152 to 155 in 266ad46

	// Put the preferred payment method to the front of the array, so it's shown as default. We assume their last payment method is their preferred.
	if (lastPaymentMethod) {
	return buttonOptions.sort((method) => (method.value === lastPaymentMethod ? -1 : 0));
	}

But since we select active option by index

App/src/components/ButtonWithDropdownMenu/index.tsx

Line 56 in 266ad46

const selectedItem = options[selectedItemIndex] || options[0];

It turns out that after sorting, the order of elements changes, but the index remains

And I'm a little confused 😅
I agree with @roryabraham that we needed to update dependencies

But it looks like this condition is redundant

App/src/components/SettlementButton/index.tsx

Lines 152 to 155 in 266ad46

	// Put the preferred payment method to the front of the array, so it's shown as default. We assume their last payment method is their preferred.
	if (lastPaymentMethod) {
	return buttonOptions.sort((method) => (method.value === lastPaymentMethod ? -1 : 0));
	}

[grgia]

@ZhenjaHorbach do you think we'll be able to get a fix up today or consider reverting this PR for the deploy?

[ZhenjaHorbach]

@ZhenjaHorbach do you think we'll be able to get a fix up today or consider reverting this PR for the deploy?

Actually we have two fixes

1. We can revert these changes (Animate settlement button when pay and trigger a haptic feedback #48615 (review))
   And since previous code has been around for a long time, I'm not sure that this will cause any regression

2. Or we can remove this condition (

   App/src/components/SettlementButton/index.tsx

   Lines 152 to 155 in 266ad46

   	// Put the preferred payment method to the front of the array, so it's shown as default. We assume their last payment method is their preferred.
   	if (lastPaymentMethod) {
   	return buttonOptions.sort((method) => (method.value === lastPaymentMethod ? -1 : 0));
   	}

   )
   And I can't come up of any regression that could cause these changes

[ZhenjaHorbach]

@ZhenjaHorbach do you think we'll be able to get a fix up today or consider reverting this PR for the deploy?

So I think I can create a PR today with the second proposal
Since this proposal looks right to me

[grgia]

I think that's fine @ZhenjaHorbach. Do you happen to know why we added the policyId selector here?

const [lastPaymentMethod = '-1'] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {selector: (paymentMethod) => paymentMethod?.[policyID]});

[ZhenjaHorbach]

I think it would just simplify the code

[grgia]

@ZhenjaHorbach sounds good to me

[mountiny]

Thanks for looking into this, just for my understanding that PR is already in production right? So that would mean it cannot be the root cause of the deploy blocker, right?

[ZhenjaHorbach]

Created PR for this issue
#49345

[ZhenjaHorbach]

Thanks for looking into this, just for my understanding that PR is already in production right? So that would mean it cannot be the root cause of the deploy blocker, right?

Maybe we just didn't notice the issue when it was in staging 😅

[mountiny]

Demoting as this is already in production

[mountiny]

PR is up, @dukenv0307 is assigned for a review, as its not a blocker we do not have to CP