Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions src/pages/iou/request/step/IOURequestStepConfirmation/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ import type {FileObject} from '@src/types/utils/Attachment';
import type {OnyxCollection} from 'react-native-onyx';

import {validTransactionDraftIDsSelector} from '@selectors/TransactionDraft';
import {deepEqual} from 'fast-equals';
import React, {startTransition, useEffect, useState} from 'react';
import {View} from 'react-native';

Expand Down Expand Up @@ -122,7 +123,7 @@ function useConfirmationParticipants({participants, iouType, privateIsArchivedMa
// Keep the projected rows immutable across the receipt-validation and list hooks.
'use memo';

return (
const projectedParticipants =
participants?.map((participant) => {
if (participant.isSender && iouType === CONST.IOU.TYPE.INVOICE) {
return participant;
Expand All @@ -144,8 +145,19 @@ function useConfirmationParticipants({participants, iouType, privateIsArchivedMa
reportDraft: participantReportDraft,
pendingDeleteMemberAccountIDs: undefined,
});
}) ?? []
);
}) ?? [];

// The rows are rebuilt whenever any report, personal detail or archive flag changes, e.g. when the report dropdown
// fetches outstanding reports as it opens. New rows make the list behind the dropdown register its arrow keys again,
// on top of the dropdown's, so the dropdown can't be navigated. Equal rows keep the previous array to prevent that.
// A deep comparison is needed because every row holds fresh nested objects, such as its icons.
const [stableParticipants, setStableParticipants] = useState(projectedParticipants);
const areParticipantsEqual = deepEqual(stableParticipants, projectedParticipants);
Comment thread
DylanDylann marked this conversation as resolved.
Resolved
if (!areParticipantsEqual) {
setStableParticipants(projectedParticipants);
}

return areParticipantsEqual ? stableParticipants : projectedParticipants;
}

function IOURequestStepConfirmationContent({
Expand Down
Loading