[$125] Expense - Distance rate reappear briefly/flickers while deleting the rate

[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.3.3-6
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory around https://test-management.browserstack.com/projects/2219752/test-runs/TR-2991/folder/13176744/41237138/1128450814
Email or phone of affected tester (no customers): kiatest.78+ck116269@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 16/18.7.1
App Component: Workspace Settings

Action Performed:

1. Launch Hybrid app
2. Create workspace & go to WS settings
3. Enable Distance rates in More features
4. Add few distance rates
5. Long press the rate >> select >> click dropdown
6. Select Delete rate >> Confirm delete
7. Observe the deleted rate reappear briefly
8. Tap on any other rate >> Delete >> Delete
9. Observe the deleted rate reappear briefly

Expected Result:

Distance rate should not reappear briefly/flicker while deleting the rate

Actual Result:

Distance rate reappear briefly/flicker while deleting the rate
The issue happens in Tags and Taxes page as well

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7051344_1768599453586.ScreenRecording_01-16-2026_16-35-10_1.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022012317540349141204
• Upwork Job ID: 2012317540349141204
• Last Price Increase: 2026-02-23

Issue Owner

Current Issue Owner: @jasperhuangg

[melvin-bot]

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

[annaweber830]

Proposal

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

Distance rate should not reappear briefly/flicker while deleting the rate

What is the root cause of that problem?

The distance rate list is driven by Onyx policy data. During the delete flow, the app marks the rate as pending delete, but the UI list still includes it under some conditions, and interim Onyx merges/refreshes can temporarily reintroduce the pre-delete rate state before the final state settles—resulting in a brief re-render where the deleted rate shows again.

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

• UI list behavior: Exclude rates with pendingAction: DELETE from the distance rates list while online, so once a user confirms deletion the item is immediately removed from view (no flicker window).
• Onyx success handling: Add a successData update for distance-rate deletion that explicitly removes the deleted rate(s) from policy.customUnits[distanceUnitID].rates after the API succeeds, aligning the delete flow with other workspace entities (e.g., tags/categories) that null out deleted items on success.
  

  App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

  Lines 220 to 253 in e94f05d

  	const distanceRatesList = useMemo<RateForList[]>(
  	() =>
  	Object.values(customUnitRates).map((value) => ({
  	rate: value.rate,
  	value: value.customUnitRateID,
  	text: value.name,
  	alternateText: `${convertAmountToDisplayString(value.rate, value.currency ?? CONST.CURRENCY.USD)} / ${translate(
  	`common.${customUnit?.attributes?.unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES}`,
  	)}`,
  	keyForList: value.customUnitRateID,
  	isDisabled: value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
  	pendingAction:
  	value.pendingAction ??
  	value.pendingFields?.rate ??
  	value.pendingFields?.enabled ??
  	value.pendingFields?.currency ??
  	value.pendingFields?.taxRateExternalID ??
  	value.pendingFields?.taxClaimablePercentage ??
  	value.pendingFields?.name ??
  	customUnit?.pendingFields?.attributes ??
  	(policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD ? policy?.pendingAction : undefined),
  	errors: value.errors ?? undefined,
  	rightElement: (
  	<Switch
  	isOn={!!value?.enabled}
  	accessibilityLabel={translate('workspace.distanceRates.trackTax')}
  	onToggle={(newValue: boolean) => updateDistanceRateEnabled(newValue, value.customUnitRateID)}
  	showLockIcon={!canDisableOrDeleteRate(value.customUnitRateID)}
  	disabled={value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
  	/>
  	),
  	})),
  	[canDisableOrDeleteRate, customUnitRates, translate, customUnit?.attributes?.unit, customUnit?.pendingFields?.attributes, policy?.pendingAction, updateDistanceRateEnabled],
  	);

const distanceRatesList = useMemo<RateForList[]>(
        () =>
            Object.values(customUnitRates)
                .filter((value) => value.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline)
                .map((value) => ({
                    rate: value.rate,
                    value: value.customUnitRateID,
                    text: value.name,
                    alternateText: `${convertAmountToDisplayString(value.rate, value.currency ?? CONST.CURRENCY.USD)} / ${translate(
                        `common.${customUnit?.attributes?.unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES}`,
                    )}`,
                    keyForList: value.customUnitRateID,
                    isDisabled: value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                    pendingAction:
                        value.pendingAction ??
                        value.pendingFields?.rate ??
                        value.pendingFields?.enabled ??
                        value.pendingFields?.currency ??
                        value.pendingFields?.taxRateExternalID ??
                        value.pendingFields?.taxClaimablePercentage ??
                        value.pendingFields?.name ??
                        customUnit?.pendingFields?.attributes ??
                        (policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD ? policy?.pendingAction : undefined),
                    errors: value.errors ?? undefined,
                    rightElement: (
                        <Switch
                            isOn={!!value?.enabled}
                            accessibilityLabel={translate('workspace.distanceRates.trackTax')}
                            onToggle={(newValue: boolean) => updateDistanceRateEnabled(newValue, value.customUnitRateID)}
                            showLockIcon={!canDisableOrDeleteRate(value.customUnitRateID)}
                            disabled={value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
                        />
                    ),
                })),
        [canDisableOrDeleteRate, customUnitRates, isOffline, translate, customUnit?.attributes?.unit, customUnit?.pendingFields?.attributes, policy?.pendingAction, updateDistanceRateEnabled],
    );

And we should add this code to DistanceRate

const successRates: Record<string, null> = {};
    const failureRates: Record<string, Partial<Rate>> = {};

    for (const rateID of rateIDsToDelete) {
        optimisticRates[rateID] = {
            enabled: false,
            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
        };
        successRates[rateID] = null;
        failureRates[rateID] = {
            enabled: currentRates[rateID].enabled,
            pendingAction: null,
            errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
        };
    }


    const successData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
            value: {
                customUnits: {
                    [customUnit.customUnitID]: {
                        rates: successRates,
                    },
                },
            },
        },
    ];

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Line 226 in e94f05d

return policyTagLists.map((policyTagList) => {

return policyTagLists
               .filter((policyTagList) => policyTagList.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline)
               .map((policyTagList) => {

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Line 266 in e94f05d

return Object.values(policyTagLists?.at(0)?.tags ?? {}).map((tag) => ({

return Object.values(policyTagLists?.at(0)?.tags ?? {})
            .filter((tag) => tag.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline)
            .map((tag) => ({

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Lines 157 to 182 in e94f05d

	const taxesList = useMemo<ListItem[]>(() => {
	if (!policy) {
	return [];
	}
	return Object.entries(policy.taxRates?.taxes ?? {}).map(([key, value]) => {
	const canEditTaxRate = policy && canEditTaxRatePolicyUtils(policy, key);
	return {
	text: value.name,
	alternateText: textForDefault(key, value),
	keyForList: key,
	isDisabledCheckbox: !canEditTaxRatePolicyUtils(policy, key),
	isDisabled: value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
	pendingAction: value.pendingAction ?? (Object.keys(value.pendingFields ?? {}).length > 0 ? CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE : null),
	errors: value.errors ?? getLatestErrorFieldForAnyField(value),
	rightElement: (
	<Switch
	isOn={!value.isDisabled}
	disabled={!canEditTaxRate || value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
	accessibilityLabel={translate('workspace.taxes.actions.enable')}
	onToggle={(newValue: boolean) => updateWorkspaceTaxEnabled(newValue, key)}
	/>
	),
	};
	});
	}, [policy, textForDefault, translate, updateWorkspaceTaxEnabled]);

const taxesList = useMemo<ListItem[]>(() => {
        if (!policy) {
            return [];
        }
        return Object.entries(policy.taxRates?.taxes ?? {})
            .filter(([, value]) => value.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline)
            .map(([key, value]) => {
                const canEditTaxRate = policy && canEditTaxRatePolicyUtils(policy, key);

                return {
                    text: value.name,
                    alternateText: textForDefault(key, value),
                    keyForList: key,
                    isDisabledCheckbox: !canEditTaxRatePolicyUtils(policy, key),
                    isDisabled: value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                    pendingAction: value.pendingAction ?? (Object.keys(value.pendingFields ?? {}).length > 0 ? CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE : null),
                    errors: value.errors ?? getLatestErrorFieldForAnyField(value),
                    rightElement: (
                        <Switch
                            isOn={!value.isDisabled}
                            disabled={!canEditTaxRate || value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
                            accessibilityLabel={translate('workspace.taxes.actions.enable')}
                            onToggle={(newValue: boolean) => updateWorkspaceTaxEnabled(newValue, key)}
                        />
                    ),
                };
            });
    }, [isOffline, policy, textForDefault, translate, updateWorkspaceTaxEnabled]);

What alternative solutions did you explore? (Optional)

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-17 00:34:39 UTC.

Proposal

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

Expense - Distance rate reappear briefly/flickers while deleting the rate

What is the root cause of that problem?

When we tap on "Delete rate", we trigger DeletePolicyDistanceRates

App/src/libs/actions/Policy/DistanceRate.ts

Line 393 in 735dc89

function deletePolicyDistanceRates(

On Delete Distance rate modal > When we tap on "Delete", delete modal animations are already running leads to flickering of distance rates

App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

Line 313 in 735dc89

deletePolicyDistanceRates(policyID, customUnit, selectedDistanceRates, transactionIDsAffected, transactionViolations);

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

We should only trigger this DeletePolicyDistanceRates when interactions in UI is completed, wrap this with InteractionManager.runAfterInteractions(() => {})

App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

Line 313 in 735dc89

deletePolicyDistanceRates(policyID, customUnit, selectedDistanceRates, transactionIDsAffected, transactionViolations);

const deleteRates = () => {
    if (customUnit === undefined) {
        return;
    }

    const transactionIDsAffected = selectedDistanceRates.flatMap((rateID) => eligibleTransactionsData?.rateIDToTransactionIDsMap?.[rateID] ?? []);

    InteractionManager.runAfterInteractions(() => {
        deletePolicyDistanceRates(policyID, customUnit, selectedDistanceRates, transactionIDsAffected, transactionViolations);

    })
    setIsDeleteModalVisible(false);

    // eslint-disable-next-line @typescript-eslint/no-deprecated
    InteractionManager.runAfterInteractions(() => {
        setSelectedDistanceRates([]);
    });
};

What alternative solutions did you explore? (Optional)

n/A

Result

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/~022012317540349141204

[melvin-bot]

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

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.

• When a distance rate is deleted on iOS, it shows again for a short time.
• Then it disappears.
• This causes a visible flicker in the list.

What is the root cause of that problem?

• The distance-rate selector returns rates marked for deletion.
• During a policy refresh, these rates get merged back into the UI state.
• This makes the deleted rate appear again briefly.

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

• Always remove rates with pendingAction: DELETE in the shared selector.
• Do this inside getDistanceRateCustomUnit.
• This ensures no consumer can receive deleted rates.

PolicyUtils.ts
Lines 176–186

function getDistanceRateCustomUnit(policy: OnyxEntry<Policy>): CustomUnit | undefined {
    const distanceUnit = Object.values(policy?.customUnits ?? {}).find(
        (unit) => unit.name === CONST.CUSTOM_UNITS.NAME_DISTANCE,
    );

    if (!distanceUnit?.rates) {
        return distanceUnit;
    }

    return {
        ...distanceUnit,
        rates: Object.fromEntries(
            Object.entries(distanceUnit.rates).filter(
                ([, rate]) => rate?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
            ),
        ),
    };
}

What alternative solutions did you explore? (Optional)

[ashu75575]

Proposal

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

When deleting distance rates on the iOS hybrid app The deleted rate briefly reappears in the list before disappearing
When tapping another rate and deleting it, the same issue occurs - deleted rate flickers back into view

What is the root cause of that problem?

There's a race condition between three asynchronous operations happening at different speeds:

1. Optimistic Onyx update - Immediately marks the rate as pendingAction: DELETE
2. Debounced list rendering - SelectionListWithModal uses a 300ms debounce (useDebouncedState) to smooth out list updates during filtering
3. Deferred selection clearing - InteractionManager.runAfterInteractions() delays clearing the selection state

The timing mismatch creates a window where:
• The list component displays stale debounced data (showing the deleted rate)
• While the selection state still includes the deleted rate
• Before both updates propagate through

The debounce logic in SelectionListWithModal chooses between immediate data and 300ms-delayed data based on whether filtering is active. During deletion operations, this can temporarily display the old data containing the deleted rate.

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

Two changes in PolicyDistanceRatesPage.tsx:

Remove the InteractionManager wrapper around selection clearing

App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

Lines 317 to 319 in 75c85ae

	InteractionManager.runAfterInteractions(() => {
	setSelectedDistanceRates([]);
	});

setSelectedDistanceRates([]);

Then ilter out deleted rates before passing to SelectionListWithModal

Add a memoized filter right after the useSearchResults hook to ensure deleted items never appear in the display:

aound here:

App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

Line 261 in 75c85ae

const filteredDistanceRatesListData = useMemo(
    () => filteredDistanceRatesList.filter(
        (rate) => customUnitRates[rate.value]?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE
    ),
    [filteredDistanceRatesList, customUnitRates]
);

Then pass filteredDistanceRatesListData instead of filteredDistanceRatesList to the SelectionListWithModal component's data prop.

App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

Lines 498 to 499 in 75c85ae

	<SelectionListWithModal
	data={filteredDistanceRatesList}

<SelectionListWithModal
    data={filteredDistanceRatesListData}
    // ... rest of props

Why this works:
• Ensures selection state updates synchronously before any re-render
• Prevents the debounced list from ever showing deleted items, regardless of timing
• Together they eliminate the race condition window completely

What alternative solutions did you explore? (Optional)

N/A