[$250] Attendee selector shows form error as soon as you open up the RHP

[m-natarajan]

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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open a submitted card expense as approver (viewing an expense with no attendees selected)
2. Click the Attendees button
3. Observe the RHN

Expected Result:

RBR should not displayed or wait until the form is submitted

Actual Result:

RBR displayed immediately after opening the Attendees

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

CleanShot.2025-05-19.at.10.56.44.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021924919128693635846
• Upwork Job ID: 1924919128693635846
• Last Price Increase: 2025-05-27

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-19 21:41:11 UTC.

Proposal

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

Attendee selector shows form error as soon as you open up the RHP

What is the root cause of that problem?

• shouldShowErrorMessage will become true as soon as the page is opened and attendees length is 0.
  

  App/src/pages/iou/request/MoneyRequestAttendeeSelector.tsx

  Line 242 in 16a4d7b

  const shouldShowErrorMessage = attendees.length < 1;

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

• We should create a state for shouldShowErrorMessage and set that to true when we click confirm button and attendees length is 0.
  

  App/src/pages/iou/request/MoneyRequestAttendeeSelector.tsx

  Lines 244 to 253 in 16a4d7b

  	const handleConfirmSelection = useCallback(
  	(_keyEvent?: GestureResponderEvent | KeyboardEvent, option?: Option) => {
  	if (shouldShowErrorMessage || (!attendees.length && !option)) {
  	return;
  	}
  	onFinish(CONST.IOU.TYPE.SUBMIT);
  	},
  	[shouldShowErrorMessage, onFinish, attendees],
  	);

    const [shouldShowErrorMessage, setShouldShowErrorMessage] = useState(false);

    const handleConfirmSelection = useCallback(
        (_keyEvent?: GestureResponderEvent | KeyboardEvent, option?: Option) => {
            if (attendees.length < 1 && !option) {
                setShouldShowErrorMessage(true);
                return;
            }

            onFinish(CONST.IOU.TYPE.SUBMIT);
        },
        [onFinish, attendees],
    );

• We should also set shouldShowErrorMessage to false when addAttendeeToSelection is called.
  

  App/src/pages/iou/request/MoneyRequestAttendeeSelector.tsx

  Lines 200 to 237 in 16a4d7b

  	const addAttendeeToSelection = useCallback(
  	(option: Option) => {
  	const isOptionSelected = (selectedOption: Attendee) => {
  	if (selectedOption.accountID && selectedOption.accountID === option?.accountID) {
  	return true;
  	}
  	if (selectedOption.email && selectedOption.email === option?.login) {
  	return true;
  	}
  	return false;
  	};
  	const isOptionInList = attendees.some(isOptionSelected);
  	let newSelectedOptions: Attendee[];
  	if (isOptionInList) {
  	newSelectedOptions = lodashReject(attendees, isOptionSelected);
  	} else {
  	const iconSource = option.icons?.[0]?.source;
  	const icon = typeof iconSource === 'function' ? '' : iconSource?.toString() ?? '';
  	newSelectedOptions = [
  	...attendees,
  	{
  	accountID: option.accountID ?? CONST.DEFAULT_NUMBER_ID,
  	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
  	login: option.login || option.text,
  	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
  	email: option.login || (option.text ?? ''),
  	displayName: option.text ?? '',
  	selected: true,
  	searchText: option.searchText,
  	avatarUrl: option.avatarUrl ?? icon,
  	iouType,
  	},
  	];
  	}
  	onAttendeesAdded(newSelectedOptions);

• Then we can also remove this condition, which hides the save button when shouldShowErrorMessage is false and attendees length is 0.
  

  App/src/pages/iou/request/MoneyRequestAttendeeSelector.tsx

  Lines 266 to 276 in 16a4d7b

  	const footerContent = useMemo(() => {
  	if (!shouldShowErrorMessage && !attendees.length) {
  	return;
  	}
  	return (
  	<>
  	{shouldShowErrorMessage && (
  	<FormHelpMessage
  	style={[styles.ph1, styles.mb2]}
  	isError

• Optional: attendees.length < 1 is true and we have an option in handleConfirmSelection, we can call addAttendeeToSelection with the option.
• Optional: We can replace FormHelpMessage and Button with FormAlertWithSubmitButton. Like we do in AssigneeStep component.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Result

[shawnborton]

cc @francoisl for visibility

[shawnborton]

And @allroundexperts - is this a regression from implementation?

[allroundexperts]

Um... I am not sure @shawnborton. This was implemented quite some time ago and I jumped into this project at the end.

Can I be assigned here?

[shawnborton]

Fine by me, but let's see what @alexpensify thinks.

[alexpensify]

To clarify, @allroundexperts, do you want to help with the review or write the PR to fix the issue?

[allroundexperts]

I'll write the fix for this, but before that we need to confirm from @francoisl if this is a backend bug. Normally, every transaction has yourself as an attendee. In this case, it's not happening.

[francoisl]

Ideally, when you create an expense and are the only attendee, we don't send any data for attendees in the API request.
Put another way, "no attendees" means that you are the one and only attendee. Being the attendee of your expense is the default value, so we don't need to store that extra information.

The changes I'd recommend are:

• When we create any kind of money request:
  • If the user didn't interact with the attendee selector at all, just don't include any attendees in the API request
• When we open the details of an expense:
  • If there are no attendee details in the expense details, select the current user

We'll especially need the latter change to make expenses compatible with Expensify Classic, because we also don't store attendees by default when creating expenses on Classic.