[Due for payment 2026-08-05] [$250] Expense - Error flashes when opening the Attendees field

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.45-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/66508781/folder/13176708/41236907/1607932280
Email or phone of affected tester (no customers): applausetester+bm89880@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Web, android
App Component: Chat Report View

Action Performed:

Preconditions:
Create workspace and enable Rules
Enable Attendee tracking

1. Go to staging.new.expensify.com
2. Create an expense with default attendee selected, then open it
3. Click the Attendees field.

Expected Result:

The selector should open without any validation error flashing, since an attendee is already present

Actual Result:

A red "At least one attendee is required" error briefly flashes on open.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7219221_1785187666511.bandicam_2026-07-28_00-23-00-837.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Svetlana Lazutkina
Bug ID: 7219221

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022081950425536084141
• Upwork Job ID: 2081950425536084141
• Last Price Increase: 2026-07-28

Issue Owner

Current Issue Owner: @hoangzinh

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/0dfc17cf61ddcad1858e2050f1b7c934e488a7be0945f194891ef6e28f73c2e0

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[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.

[MelvinBot]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #96440 - "Migrate useSearchSelector.base.ts from useOptionsList to usePersonalDetailOptions (part 6)" by @shubham1206agra (High confidence)
Related Issues: None

Recommendation: REVERT

PR #96440 changed MoneyRequestAttendeeSelector to a hook where selectedOptions is derived from asynchronously-loaded options instead of being seeded synchronously, so the "at least one attendee" error renders during the brief window before options finish loading. A clean revert of the App PR removes the flash; a targeted fix is also viable (see Root Cause) if the reviewers prefer to roll forward.

Assigned: @shubham1206agra (PR author), @hoangzinh and @mountiny (approving reviewers) from PR #96440
Labels: No changes. The issue carries only DeployBlockerCash; an App PR caused the regression, so the App deploy stays blocked. No DeployBlocker (Web) label is present to remove.

📋 Detailed Analysis

Evidence

• The flashing string "At least one attendee must be selected" (iou.error.atLeastOneAttendee) is rendered by src/pages/iou/request/MoneyRequestAttendeeSelector.tsx:153, gated by shouldShowErrorMessage = selectedOptions.length < 1 at line 130.
• Reproducible on staging only, not production → a new regression introduced by a PR in the 9.4.45 deploy.
• PR [Payment due @hoangzinh] Migrate useSearchSelector.base.ts from useOptionsList to usePersonalDetailOptions (part 6) #96440 is in the current StagingDeployCash checklist (Deploy Checklist: New Expensify 2026-07-27 #97134) and merged 2026-07-24, within this deploy window. It directly rewrites MoneyRequestAttendeeSelector.tsx and src/hooks/usePersonalDetailSearchSelector/base.ts — the exact files that produce selectedOptions.

Verification

• Affected files: src/pages/iou/request/MoneyRequestAttendeeSelector.tsx (error render + shouldShowErrorMessage) and src/hooks/usePersonalDetailSearchSelector/base.ts (derivation of selectedOptions / areOptionsInitialized).
• The deploy diff (9.4.44-6...main) shows both files changed in this release, and gh pr view 96440 --json files confirms PR [Payment due @hoangzinh] Migrate useSearchSelector.base.ts from useOptionsList to usePersonalDetailOptions (part 6) #96440 modifies both.
• Before/after comparison of the selection hook confirms the behavioral change (see Root Cause).

Root Cause

Before #96440, the selector used useSearchSelector, whose base.ts initialized selection synchronously:

const [selectedOptions, setSelectedOptions] = useState<OptionData[]>(initialSelected ?? []);

initialSelected was the full array of attendee option objects, so on first render selectedOptions.length >= 1 immediately — no error could flash, even before options loaded.

After #96440, the selector uses usePersonalDetailSearchSelector, whose base.ts derives selectedOptions from loaded data:

const areOptionsInitialized = (optionsWithContacts?.length ?? 0) > 0;
...
const transformedOptions = optionsWithContacts?.map(o => ({...o, isSelected: selectedAccountIDs.has(o.accountID.toString())})) ?? [];
const selectedOptions = /* from transformedOptions.isSelected + extraOptions.isSelected */;

The selector now passes initialSelected as a Set of accountID strings, and only seeds initialExtraOptions for attendees that are not in personal details (.filter((option) => !option.personalDetail) in MoneyRequestAttendeeSelector.tsx).

For the repro's default attendee (the report owner / current user, who is in personal details), the attendee lives only in the initialSelected accountID Set — not in extraOptions. Until usePersonalDetailOptions finishes loading, optionsWithContacts is empty → transformedOptions is empty → selectedOptions is empty → shouldShowErrorMessage is true → the red error renders. Once options initialize, the accountID matches, selectedOptions populates, and the error disappears — producing the brief flash on open.

Note that shouldShowErrorMessage (line 130) is not gated by areOptionsInitialized, while the list/sections are (lines 173, 230). A targeted roll-forward fix would gate the footer error the same way, e.g. only compute the error once options are ready:

const shouldShowErrorMessage = areOptionsInitialized && selectedOptions.length < 1;

This keeps the migration and eliminates the flash without a full revert.

[MelvinBot]

Issue Analysis

Root Cause: A red iou.error.atLeastOneAttendee error flashes because the footer error is gated only by selectedOptions.length < 1 in MoneyRequestAttendeeSelector.tsx:129 — it is not gated by areOptionsInitialized the way the option list is. After PR #96440 migrated this selector to usePersonalDetailSearchSelector, selectedOptions is now derived asynchronously from optionsWithContacts (loaded by usePersonalDetailOptions). The default attendee (the current user, who exists in personal details) lives only in the selectedAccountIDs Set, so until options finish loading transformedOptions is empty → selectedOptions is empty → the error renders, then clears once options initialize. This is a staging-only regression (not reproducible in production), consistent with a PR in the current 9.4.45 StagingDeployCash.

Recommended Fix: Gate the footer error the same way the option list is already gated, in MoneyRequestAttendeeSelector.tsx:129:

const shouldShowErrorMessage = areOptionsInitialized && selectedOptions.length < 1;

This suppresses the error while options are still loading, so it only appears once the user has genuinely deselected all attendees. Reverting #96440 is the alternative if a targeted roll-forward isn't preferred for the deploy.

Investigation details

Symptom: With Rules + Attendee tracking enabled, opening the Attendees field on an expense that already has the default attendee briefly flashes "At least one attendee is required."

Why it flashes now but didn't before #96440:

• Before: the old useSearchSelector seeded selectedOptions synchronously from the full attendee option objects, so selectedOptions.length >= 1 on the very first render — no flash was possible.
• After [Payment due @hoangzinh] Migrate useSearchSelector.base.ts from useOptionsList to usePersonalDetailOptions (part 6) #96440: selectedOptions is computed from transformedOptions (derived from the async optionsWithContacts) plus extraOptions. The selector only seeds initialExtraOptions for attendees not in personal details (.filter((option) => !option.personalDetail)). The repro's default attendee is the report owner / current user, who is in personal details, so it lives only in the accountID Set — invisible until optionsWithContacts loads. During that window selectedOptions is empty and the error renders.

Evidence:

• Error gate (ungated by init): MoneyRequestAttendeeSelector.tsx:129 and the FormHelpMessage render in getFooterContent just below it.
• Async derivation of selectedOptions and areOptionsInitialized: usePersonalDetailSearchSelector/base.ts:185-213.

Alternative explanations considered: A pure validation-timing bug independent of #96440 was ruled out — the error path itself is unchanged; only the source/timing of selectedOptions changed, and that change is exactly what #96440 introduced. "Not reproducible in production" further confirms it's a regression from a PR in this deploy rather than long-standing behavior.

Confidence: High — code evidence explains all symptoms and the before/after diff of #96440 accounts for both the appearance and the flash-then-clear timing.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/97163) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.