[$250] Unable to select user in offline mode

[IuliiaHerets]

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

---

Version Number: v9.4.16-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
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/TR-45088/41236713/1498322660?status_id=1014140&issue_type=jira

Action Performed:

1. Set up a vacation delegate
2. Log in with any account and add a vacation delegate
3. Go offline
4. Go to Account > Profile > Status
5. Click on the added "Vacation delegate"

Expected Result:

Select user for vacation delegate modal should appear

Actual Result:

Getting error message - "You appear to be offline"

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

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022069063855085164009
• Upwork Job ID: 2069063855085164009
• Last Price Increase: 2026-06-22

Issue Owner

Current Issue Owner: @Valforte

[MelvinBot]

Proposal

⚠️ Root cause is confirmed with code evidence (High). The desired behavior is a product/UX call (Medium) — see the two options below.

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

When a vacation delegate is already set, tapping it on Account > Profile > Status while offline navigates to the vacation delegate selection screen, which shows a full-page "You appear to be offline" block instead of the user-selection list.

What is the root cause of that problem?

The selection screen wraps its content in FullPageOfflineBlockingView, which renders the youAppearToBeOffline / thisFeatureRequiresInternet blocking view whenever isOffline is true.

This block is intentional: setting a delegate calls API.makeRequestWithSideEffects (not a queueable API.write) because the flow must read the server response to surface a policy-diff warning. That request cannot be completed offline, so the action genuinely requires internet.

The actual defect is the dead-end: the entry-point row in StatusPage is fully tappable offline (onPress just navigates), so the user is routed into a screen that can only show the offline block.

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

Decide the desired behavior — two reasonable directions:

1. (Recommended) Disable the entry point offline. In VacationDelegateMenuItem, gate the MenuItem's onPress behind useNetwork().isOffline (disable the row / no-op when offline), so users aren't routed into a screen they can't use. This matches the reality that the SET action requires the server and removes the confusing dead-end. The same guard should be applied to the domain-member entry point (DomainMemberVacationDelegatePage) for consistency.

2. Accept as working-as-intended. The full-page block is the standard App pattern for "this feature requires internet," and it does communicate why the screen is unavailable. If the team is comfortable with that, this can be closed as WAI.

Note: fully satisfying the reporter's literal expectation (show the selection modal offline) is not a small change — it would require letting the user browse offline and deferring/reworking the policy-diff warning flow, since the SET request can't be queued.

Why setting offline isn't viable

setVacationDelegate uses makeRequestWithSideEffects specifically to read the API response and conditionally show vacationDelegateWarning (policy-diff) before completing. There is no optimistic/offline path for that decision, so the row selection can't be honored offline without redesigning the warning flow.

What alternative solutions did you explore?

• Replacing the full-page block with the standard offline indicator and letting the list render read-only — rejected because tapping a row still can't complete offline, so it re-creates a dead-end at selection time.

---

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

[MobileMage]

Proposal

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

When a user is offline and opens Account > Profile > Status and taps the existing "Vacation delegate" row, instead of seeing the user-selection screen they get a full-page "You appear to be offline" blocker. The selection screen is unusable offline even though the underlying option list (recent reports + contacts) comes entirely from local Onyx data.

What is the root cause of that problem?

The Status row navigates to ROUTES.SETTINGS_VACATION_DELEGATE → VacationDelegatePage, which renders BaseVacationDelegateSelectionComponent. That component wraps its entire body — the SelectionList of members — in a FullPageOfflineBlockingView:

App/src/components/BaseVacationDelegateSelectionComponent.tsx

Lines 179 to 206 in 76c0221

	<FullPageOfflineBlockingView>
	{hasActiveDelegations ? (
	<View style={styles.mt6}>
	<DelegatorList
	delegators={vacationDelegate?.delegatorFor}
	message={cannotSetDelegateMessage}
	/>
	</View>
	) : (
	<View style={[styles.flex1, styles.w100, styles.pRelative]}>
	<SelectionList
	sections={areOptionsInitialized ? sections : []}
	ListItem={UserListItem}
	onSelectRow={(item) => {
	// Clear search to prevent "No results found" after selection
	setSearchTerm('');
	onSelectRow(item);
	}}
	textInputOptions={textInputOptions}
	shouldShowLoadingPlaceholder={!areOptionsInitialized}
	isLoadingNewOptions={!!isSearchingForReports}
	shouldSingleExecuteRowSelect
	shouldShowTextInput
	/>
	</View>
	)}
	</FullPageOfflineBlockingView>

FullPageOfflineBlockingView short-circuits to a BlockingView with common.youAppearToBeOffline whenever useNetwork().isOffline is true, so offline the whole list is replaced by the blocker:

App/src/components/BlockingViews/FullPageOfflineBlockingView.tsx

Lines 24 to 35 in 76c0221

	if (isOffline) {
	return (
	<BlockingView
	icon={icons.OfflineCloud}
	iconColor={theme.offline}
	title={translate('common.youAppearToBeOffline')}
	subtitle={translate('common.thisFeatureRequiresInternet')}
	addBottomSafeAreaPadding={addBottomSafeAreaPadding}
	addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
	/>
	);
	}

The block is unnecessary for rendering. The list is built from usePersonalDetailSearchSelector (local personal details and recent reports) — the searchUserInServer(debouncedSearchTerm) effect is only an enrichment call that adds server-matched contacts; existing local options still populate offline. So the offline blocker hides data that is fully available locally.

The one genuinely network-dependent piece is the write path. onSelectRow in VacationDelegatePage calls setVacationDelegate, which uses API.makeRequestWithSideEffects (not API.write) because the page awaits the response to decide whether to show the policy-diff warning modal (POLICY_DIFF_WARNING) or the error modal (EXP_ERROR). That response never arrives offline. This is almost certainly why the blanket FullPageOfflineBlockingView was added — but blocking the entire page to guard one branch of the select handler is too broad and breaks the offline-first contract for the whole screen.

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

Remove the FullPageOfflineBlockingView wrapper in BaseVacationDelegateSelectionComponent so the SelectionList (and the DelegatorList branch) render offline using local data, and instead gate only the network-dependent select action. The cleanest fix that keeps offline-first behavior: in BaseVacationDelegateSelectionComponent, drop the wrapper and render the content directly; then in VacationDelegatePage.onSelectRow, branch on connectivity — the delete case already uses API.write (queues offline fine), and for the set case when offline, optimistically queue and navigate back rather than awaiting a response:

if (isOffline) {
    setVacationDelegate(currentUserLogin, option?.login ?? '', false, vacationDelegate?.delegate);
    Navigation.goBack(ROUTES.SETTINGS_STATUS);
    return;
}

This matches the optimistic data already written in setVacationDelegate (it merges the new delegate with a pendingAction: UPDATE, surfaced by the existing OfflineWithFeedback in VacationDelegateMenuItem). The warning/error modals only apply to server responses, so skipping them offline is correct. The same wrapper removal benefits DomainMemberVacationDelegatePage, whose onSelectRow already calls plain queueable actions and navigates back without awaiting — so it needs no extra offline branch. VacationDelegatePage already sets shouldShowOfflineIndicator={false}, so we should let the standard offline indicator show (or keep the per-row pending indicator) instead of a full-page block.

What alternative solutions did you explore? (Optional)

Keeping FullPageOfflineBlockingView but adding a prop to make it opt-out per consumer — rejected because the list content is local-only and should simply render offline; a conditional prop adds surface area without fixing the underlying "block the whole page for one network branch" mistake. I also considered disabling only the row press offline, but that still hides the perfectly-usable contact list.

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

Tapping the vacation delegate row on the Status page navigates to VacationDelegatePage, which renders the shared selection UI through BaseVacationDelegateSelectionComponent.

That component wraps its entire body — the search input and the SelectionList — inside a FullPageOfflineBlockingView:

App/src/components/BaseVacationDelegateSelectionComponent.tsx

Lines 179 to 206 in 2b78b56

	<FullPageOfflineBlockingView>
	{hasActiveDelegations ? (
	<View style={styles.mt6}>
	<DelegatorList
	delegators={vacationDelegate?.delegatorFor}
	message={cannotSetDelegateMessage}
	/>
	</View>
	) : (
	<View style={[styles.flex1, styles.w100, styles.pRelative]}>
	<SelectionList
	sections={areOptionsInitialized ? sections : []}
	ListItem={UserListItem}
	onSelectRow={(item) => {
	// Clear search to prevent "No results found" after selection
	setSearchTerm('');
	onSelectRow(item);
	}}
	textInputOptions={textInputOptions}
	shouldShowLoadingPlaceholder={!areOptionsInitialized}
	isLoadingNewOptions={!!isSearchingForReports}
	shouldSingleExecuteRowSelect
	shouldShowTextInput
	/>
	</View>
	)}
	</FullPageOfflineBlockingView>

FullPageOfflineBlockingView discards its children and renders the "You appear to be offline" / "This feature requires internet connection" blocking screen the moment isOffline is true:

App/src/components/BlockingViews/FullPageOfflineBlockingView.tsx

Lines 24 to 37 in 2b78b56

	if (isOffline) {
	return (
	<BlockingView
	icon={icons.OfflineCloud}
	iconColor={theme.offline}
	title={translate('common.youAppearToBeOffline')}
	subtitle={translate('common.thisFeatureRequiresInternet')}
	addBottomSafeAreaPadding={addBottomSafeAreaPadding}
	addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
	/>
	);
	}
	return children;

So offline: tap row → navigate to page → isOffline === true → children are never rendered → user sees the offline block instead of the select-user list. That is exactly the reported symptom.

This block is incorrect for this feature, because vacation-delegate selection is fully offline-capable:

• Setting/deleting the delegate are optimistic Onyx writes — setVacationDelegate applies optimisticData immediately and only reads the response for the policy-diff/error modals:
  

  App/src/libs/actions/VacationDelegate.ts

  Lines 12 to 58 in 2b78b56

  	function setVacationDelegate(creator: string, delegate: string, shouldOverridePolicyDiffWarning = false, currentDelegate?: string) {
  	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
  	value: {
  	creator,
  	delegate,
  	errors: null,
  	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
  	previousDelegate: currentDelegate,
  	},
  	},
  	];
  	const successData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
  	value: {
  	errors: null,
  	pendingAction: null,
  	previousDelegate: null,
  	},
  	},
  	];
  	const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
  	value: {
  	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),
  	},
  	},
  	];
  	const parameters: SetVacationDelegateParams = {
  	creator,
  	vacationDelegateEmail: delegate,
  	overridePolicyDiffWarning: shouldOverridePolicyDiffWarning,
  	};
  	// We need to read the API response for showing a warning if there is a policy diff warning.
  	// eslint-disable-next-line rulesdir/no-api-side-effects-method
  	return API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.SET_VACATION_DELEGATE, parameters, {optimisticData, successData, failureData});
  	}

  
  and deleteVacationDelegate is a plain optimistic API.write:
  

  App/src/libs/actions/VacationDelegate.ts

  Lines 60 to 104 in 2b78b56

  	function deleteVacationDelegate(vacationDelegate?: VacationDelegate) {
  	if (isEmptyObject(vacationDelegate)) {
  	return;
  	}
  	const {creator, delegate} = vacationDelegate;
  	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
  	value: {
  	creator: null,
  	delegate: null,
  	errors: null,
  	previousDelegate: vacationDelegate?.delegate,
  	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
  	},
  	},
  	];
  	const successData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
  	value: {
  	errors: null,
  	pendingAction: null,
  	},
  	},
  	];
  	const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
  	value: {
  	creator,
  	delegate,
  	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),
  	},
  	},
  	];
  	API.write(WRITE_COMMANDS.DELETE_VACATION_DELEGATE, null, {optimisticData, successData, failureData});
  	}

• The list itself is built from locally cached personal details and recent reports via usePersonalDetailSearchSelector, not from a network call:
  

  App/src/components/BaseVacationDelegateSelectionComponent.tsx

  Lines 70 to 77 in 2b78b56

  	const {searchTerm, debouncedSearchTerm, setSearchTerm, availableOptions, areOptionsInitialized} = usePersonalDetailSearchSelector({
  	selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_SINGLE,
  	maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
  	excludeLogins,
  	includeUserToInvite: true,
  	includeRecentReports: true,
  	includeCurrentUser,
  	});

• The only network dependency is searchUserInServer(debouncedSearchTerm), which is purely additive (it merges extra results when online); local options still populate without it:
  

  App/src/components/BaseVacationDelegateSelectionComponent.tsx

  Lines 79 to 81 in 2b78b56

  	useEffect(() => {
  	searchUserInServer(debouncedSearchTerm);
  	}, [debouncedSearchTerm]);

So: tap row offline → BaseVacationDelegateSelectionComponent → FullPageOfflineBlockingView blocks all children → offline screen instead of the user-selection list, even though the feature works offline.

Same root cause in the sibling flow. Because the block lives in the shared component, the domain flow (DomainMemberVacationDelegatePage) is broken offline in exactly the same way, and its set/delete actions are optimistic too:

App/src/pages/domain/Members/DomainMemberVacationDelegatePage.tsx

Lines 53 to 67 in 2b78b56

	return (
	<DomainNotFoundPageWrapper domainAccountID={domainAccountID}>
	<ScreenWrapper
	enableEdgeToEdgeBottomSafeAreaPadding
	testID="DomainMemberVacationDelegate"
	>
	<BaseVacationDelegateSelectionComponent
	vacationDelegate={vacationDelegate}
	headerTitle={translate('common.vacationDelegate')}
	onSelectRow={onSelectRow}
	onBackButtonPress={() => Navigation.goBack(ROUTES.DOMAIN_MEMBER_DETAILS.getRoute(domainAccountID, accountID))}
	cannotSetDelegateMessage={translate('domain.members.cannotSetVacationDelegateForMember', memberLogin ?? '')}
	additionalExcludeLogins={memberLogin ? {[memberLogin]: true} : undefined}
	/>
	</ScreenWrapper>

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

Stop full-page-blocking this offline-capable screen. Remove the FullPageOfflineBlockingView wrapper in BaseVacationDelegateSelectionComponent and render the hasActiveDelegations ? <DelegatorList/> : <SelectionList/> body directly (the import on line 16 and the closing tag on line 206 go with it):

App/src/components/BaseVacationDelegateSelectionComponent.tsx

Lines 179 to 206 in 2b78b56

	<FullPageOfflineBlockingView>
	{hasActiveDelegations ? (
	<View style={styles.mt6}>
	<DelegatorList
	delegators={vacationDelegate?.delegatorFor}
	message={cannotSetDelegateMessage}
	/>
	</View>
	) : (
	<View style={[styles.flex1, styles.w100, styles.pRelative]}>
	<SelectionList
	sections={areOptionsInitialized ? sections : []}
	ListItem={UserListItem}
	onSelectRow={(item) => {
	// Clear search to prevent "No results found" after selection
	setSearchTerm('');
	onSelectRow(item);
	}}
	textInputOptions={textInputOptions}
	shouldShowLoadingPlaceholder={!areOptionsInitialized}
	isLoadingNewOptions={!!isSearchingForReports}
	shouldSingleExecuteRowSelect
	shouldShowTextInput
	/>
	</View>
	)}
	</FullPageOfflineBlockingView>

To keep offline visibility, re-enable the standard bottom offline indicator that was disabled precisely because the full-page block used to handle the offline state — drop shouldShowOfflineIndicator={false} from the ScreenWrapper on VacationDelegatePage so the existing indicator pattern surfaces "you're offline" without hiding the list:

App/src/pages/settings/Profile/CustomStatus/VacationDelegatePage.tsx

Lines 90 to 95 in 2b78b56

	return (
	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	testID="VacationDelegatePage"
	shouldShowOfflineIndicator={false}
	>

This reuses the already-in-scope optimistic actions and the existing offline indicator, with no new logic. After this, tapping the delegate row offline shows the selection list (expected result), the user can pick/change/remove a delegate optimistically, and the change syncs when back online. Minor changes/improvements can be discussed in the PR phase.

What alternative solutions did you explore? (Optional)

Keep FullPageOfflineBlockingView but bypass it when there is already a cached delegate / cached options (i.e. only block on a true cold offline start). This is strictly more code for the same outcome the optimistic actions already guarantee, and it still wrongly blocks legitimate offline selection from locally cached contacts — so removing the full-page block and relying on the standard offline indicator is cleaner and matches how other offline-capable selection screens behave.

[ahmdshrif]

🚨 Edited by proposal-police: This proposal was edited at 2026-06-23 11:26:49 UTC.

Proposal

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

While offline, opening Status > Vacation delegate (or re-selecting an existing delegate) shows the full-page "You appear to be offline" screen instead of the user-selection list, so you can't pick a delegate offline.

What is the root cause of that problem?

The selection screen blocks itself offline even though it needs no network.

1. Both delegate entry points render the shared BaseVacationDelegateSelectionComponent, which wraps its entire body in <FullPageOfflineBlockingView>:
   

   App/src/components/BaseVacationDelegateSelectionComponent.tsx

   Lines 179 to 206 in 76c0221

   	<FullPageOfflineBlockingView>
   	{hasActiveDelegations ? (
   	<View style={styles.mt6}>
   	<DelegatorList
   	delegators={vacationDelegate?.delegatorFor}
   	message={cannotSetDelegateMessage}
   	/>
   	</View>
   	) : (
   	<View style={[styles.flex1, styles.w100, styles.pRelative]}>
   	<SelectionList
   	sections={areOptionsInitialized ? sections : []}
   	ListItem={UserListItem}
   	onSelectRow={(item) => {
   	// Clear search to prevent "No results found" after selection
   	setSearchTerm('');
   	onSelectRow(item);
   	}}
   	textInputOptions={textInputOptions}
   	shouldShowLoadingPlaceholder={!areOptionsInitialized}
   	isLoadingNewOptions={!!isSearchingForReports}
   	shouldSingleExecuteRowSelect
   	shouldShowTextInput
   	/>
   	</View>
   	)}
   	</FullPageOfflineBlockingView>

2. That view returns the generic "You appear to be offline" blocker whenever isOffline, replacing the children entirely:
   

   App/src/components/BlockingViews/FullPageOfflineBlockingView.tsx

   Lines 24 to 34 in 76c0221

   	if (isOffline) {
   	return (
   	<BlockingView
   	icon={icons.OfflineCloud}
   	iconColor={theme.offline}
   	title={translate('common.youAppearToBeOffline')}
   	subtitle={translate('common.thisFeatureRequiresInternet')}
   	addBottomSafeAreaPadding={addBottomSafeAreaPadding}
   	addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
   	/>
   	);

3. But the list is built from local Onyx data (recents + contacts) via usePersonalDetailSearchSelector; searchUserInServer only augments it:
   

   App/src/components/BaseVacationDelegateSelectionComponent.tsx

   Lines 70 to 81 in 76c0221

   	const {searchTerm, debouncedSearchTerm, setSearchTerm, availableOptions, areOptionsInitialized} = usePersonalDetailSearchSelector({
   	selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_SINGLE,
   	maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
   	excludeLogins,
   	includeUserToInvite: true,
   	includeRecentReports: true,
   	includeCurrentUser,
   	});
   	useEffect(() => {
   	searchUserInServer(debouncedSearchTerm);
   	}, [debouncedSearchTerm]);

4. And setVacationDelegate (and deleteVacationDelegate) carry optimisticData, so the change applies offline:
   

   App/src/libs/actions/VacationDelegate.ts

   Lines 12 to 57 in 76c0221

   	function setVacationDelegate(creator: string, delegate: string, shouldOverridePolicyDiffWarning = false, currentDelegate?: string) {
   	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
   	{
   	onyxMethod: Onyx.METHOD.MERGE,
   	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
   	value: {
   	creator,
   	delegate,
   	errors: null,
   	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
   	previousDelegate: currentDelegate,
   	},
   	},
   	];
   	const successData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
   	{
   	onyxMethod: Onyx.METHOD.MERGE,
   	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
   	value: {
   	errors: null,
   	pendingAction: null,
   	previousDelegate: null,
   	},
   	},
   	];
   	const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
   	{
   	onyxMethod: Onyx.METHOD.MERGE,
   	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
   	value: {
   	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),
   	},
   	},
   	];
   	const parameters: SetVacationDelegateParams = {
   	creator,
   	vacationDelegateEmail: delegate,
   	overridePolicyDiffWarning: shouldOverridePolicyDiffWarning,
   	};
   	// We need to read the API response for showing a warning if there is a policy diff warning.
   	// eslint-disable-next-line rulesdir/no-api-side-effects-method
   	return API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.SET_VACATION_DELEGATE, parameters, {optimisticData, successData, failureData});

So the feature is fully offline-capable; the blanket FullPageOfflineBlockingView is the structural mistake. This hits both call sites — Settings Status (the reported path) and the Domain member page — since both use this component.

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

Drop the FullPageOfflineBlockingView wrapper in BaseVacationDelegateSelectionComponent and render the body directly:

<>
  <HeaderWithBackButton title={headerTitle} onBackButtonPress={onBackButtonPress} />
  {hasActiveDelegations ? (
    <DelegatorList .../>
  ) : (
    <SelectionList .../>
  )}
</>

This fixes both entry points at once. Regression-safe: the list and DelegatorList already read from Onyx and the set/delete actions are optimistic, so nothing here depends on connectivity — searchUserInServer simply returns no fresh results offline.

What alternative solutions did you explore? (Optional)

• Spot-fix only VacationDelegatePage (e.g. a flag passed to skip the blocker): incomplete — the blocker lives in the shared component, so the Domain member page (DomainMemberVacationDelegatePage) stays broken.
• Keep the blocker but gate it on having zero local options: adds complexity for no benefit; local recents/contacts are essentially always present, and the action is optimistic regardless.

[lorretheboy]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[aswin-s]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[melvin-bot]

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

[x-dev90]

🚨 Edited by proposal-police: This proposal was edited at 2026-06-23 09:44:00 UTC.

Proposal

What is the root cause of that problem?

The reported symptom is caused by the shared selector screen being fully blocked offline, even though its cached content can render without the network.

BaseVacationDelegateSelectionComponent builds its options from local Onyx-backed data via usePersonalDetailSearchSelector() and only uses searchUserInServer() as an additive server search:

• App/src/components/BaseVacationDelegateSelectionComponent.tsx

  Lines 69 to 80 in be8591c

  	const {searchTerm, debouncedSearchTerm, setSearchTerm, availableOptions, areOptionsInitialized} = usePersonalDetailSearchSelector({
  	selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_SINGLE,
  	maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
  	excludeLogins,
  	includeUserToInvite: true,
  	includeRecentReports: true,
  	includeCurrentUser,
  	});
  	useEffect(() => {
  	searchUserInServer(debouncedSearchTerm);

Before the fix, that component wrapped the entire selector body in FullPageOfflineBlockingView, which replaced the list with the full-page offline blocker whenever isOffline === true. That meant tapping the vacation delegate row offline navigated successfully, but the user never saw the cached selector UI.

The important nuance is that the write paths are not all equally offline-capable:

• Personal set uses API.makeRequestWithSideEffects() in setVacationDelegate(), because it must read the API response to handle the policy-diff warning:

  • App/src/libs/actions/VacationDelegate.ts

    Lines 12 to 57 in be8591c

    	function setVacationDelegate(creator: string, delegate: string, shouldOverridePolicyDiffWarning = false, currentDelegate?: string) {
    	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
    	{
    	onyxMethod: Onyx.METHOD.MERGE,
    	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
    	value: {
    	creator,
    	delegate,
    	errors: null,
    	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
    	previousDelegate: currentDelegate,
    	},
    	},
    	];
    	const successData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
    	{
    	onyxMethod: Onyx.METHOD.MERGE,
    	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
    	value: {
    	errors: null,
    	pendingAction: null,
    	previousDelegate: null,
    	},
    	},
    	];
    	const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
    	{
    	onyxMethod: Onyx.METHOD.MERGE,
    	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
    	value: {
    	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),
    	},
    	},
    	];
    	const parameters: SetVacationDelegateParams = {
    	creator,
    	vacationDelegateEmail: delegate,
    	overridePolicyDiffWarning: shouldOverridePolicyDiffWarning,
    	};
    	// We need to read the API response for showing a warning if there is a policy diff warning.
    	// eslint-disable-next-line rulesdir/no-api-side-effects-method
    	return API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.SET_VACATION_DELEGATE, parameters, {optimisticData, successData, failureData});

• Personal delete already uses API.write() and is queueable offline:

  • App/src/libs/actions/VacationDelegate.ts

    Lines 60 to 103 in be8591c

    	function deleteVacationDelegate(vacationDelegate?: VacationDelegate) {
    	if (isEmptyObject(vacationDelegate)) {
    	return;
    	}
    	const {creator, delegate} = vacationDelegate;
    	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
    	{
    	onyxMethod: Onyx.METHOD.MERGE,
    	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
    	value: {
    	creator: null,
    	delegate: null,
    	errors: null,
    	previousDelegate: vacationDelegate?.delegate,
    	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
    	},
    	},
    	];
    	const successData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
    	{
    	onyxMethod: Onyx.METHOD.MERGE,
    	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
    	value: {
    	errors: null,
    	pendingAction: null,
    	},
    	},
    	];
    	const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE>> = [
    	{
    	onyxMethod: Onyx.METHOD.MERGE,
    	key: ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE,
    	value: {
    	creator,
    	delegate,
    	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),
    	},
    	},
    	];
    	API.write(WRITE_COMMANDS.DELETE_VACATION_DELEGATE, null, {optimisticData, successData, failureData});

So the real bug is not simply “this whole feature requires internet.” The actual issue is:

1. The selector screen is blocked too early by a full-page offline gate.
2. The personal “set new delegate” action is not safe to execute offline because it depends on a side-effect response.

The same shared selector is also used by the domain member flow:

• https://github.com/Expensify/App/blob/be8591c9249d55df976743e851a5a66cb4d9e2e1/src/pages/domain/Members/DomainMemberVacationDelegatePage.tsx#L73-L80

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

We should fix this at the action level, not by disabling the entry point.

1. Let the selector render offline from cached data

Remove the FullPageOfflineBlockingView wrapper from BaseVacationDelegateSelectionComponent so the cached selector content can render offline:

• App/src/components/BaseVacationDelegateSelectionComponent.tsx

  Lines 172 to 203 in be8591c

  	return (
  	<>
  	<HeaderWithBackButton
  	title={headerTitle}
  	onBackButtonPress={onBackButtonPress}
  	/>
  	<FullPageOfflineBlockingView>
  	{hasActiveDelegations ? (
  	<View style={styles.mt6}>
  	<DelegatorList
  	delegators={vacationDelegate?.delegatorFor}
  	message={cannotSetDelegateMessage}
  	/>
  	</View>
  	) : (
  	<View style={[styles.flex1, styles.w100, styles.pRelative]}>
  	<SelectionList
  	sections={areOptionsInitialized ? sections : []}
  	ListItem={UserListItem}
  	onSelectRow={(item) => {
  	// Clear search to prevent "No results found" after selection
  	setSearchTerm('');
  	onSelectRow(item);
  	}}
  	textInputOptions={textInputOptions}
  	shouldShowLoadingPlaceholder={!areOptionsInitialized}
  	isLoadingNewOptions={!!isSearchingForReports}
  	shouldSingleExecuteRowSelect
  	shouldShowTextInput
  	/>

This preserves offline access to:

• viewing the currently selected delegate
• browsing cached recents/contacts
• deleting the existing delegate

2. Guard only the unsafe write path

In the personal flow, keep delete working offline, but block only the set new delegate action when offline.

VacationDelegatePage should:

• allow delete when the tapped login matches the current delegate

• if the user is offline and tries to set a different delegate, show the standard offline modal

• only call setVacationDelegate() when online

• App/src/pages/settings/Profile/CustomStatus/VacationDelegatePage.tsx

  Lines 41 to 48 in be8591c

  	const result = await showConfirmModal({
  	title: translate('common.headsUp'),
  	prompt: translate('statusPage.vacationDelegateWarning', getPersonalDetailByEmail(delegateLogin)?.displayName ?? delegateLogin),
  	confirmText: translate('common.confirm'),
  	cancelText: translate('common.cancel'),
  	shouldShowCancelButton: true,
  	});

• App/src/pages/settings/Profile/CustomStatus/VacationDelegatePage.tsx

  Lines 71 to 103 in be8591c

  	return;
  	}
  	if (response.jsonCode === CONST.JSON_CODE.EXP_ERROR) {
  	showErrorModal(response.message);
  	return;
  	}
  	if (response.jsonCode === CONST.JSON_CODE.POLICY_DIFF_WARNING) {
  	showWarningModal(option?.login ?? '');
  	return;
  	}
  	Navigation.goBack(ROUTES.SETTINGS_STATUS);
  	});
  	},
  	[currentUserLogin, vacationDelegate, showWarningModal, showErrorModal],
  	);
  	return (
  	<ScreenWrapper
  	includeSafeAreaPaddingBottom={false}
  	testID="VacationDelegatePage"
  	shouldShowOfflineIndicator={false}
  	>
  	<BaseVacationDelegateSelectionComponent
  	vacationDelegate={vacationDelegate}
  	onSelectRow={onSelectRow}
  	headerTitle={translate('common.vacationDelegate')}
  	onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_STATUS)}
  	cannotSetDelegateMessage={translate('statusPage.cannotSetVacationDelegate')}
  	includeCurrentUser={false}
  	/>

This follows existing codebase patterns for offline action gating with:

• title: translate('common.youAppearToBeOffline')
• prompt: translate('common.offlinePrompt')

3. Apply the same action-level guard to the domain member flow

Because the selector is shared, the domain member flow should also render offline, but block only the set action when offline instead of disabling the entire entry point.

• App/src/pages/domain/Members/DomainMemberVacationDelegatePage.tsx

  Lines 40 to 65 in be8591c

  	return;
  	}
  	if (delegateLogin === vacationDelegate?.delegate) {
  	deleteDomainVacationDelegate(domainAccountID, accountID, memberLogin, vacationDelegate);
  	Navigation.goBack(ROUTES.DOMAIN_MEMBER_DETAILS.getRoute(domainAccountID, accountID));
  	return;
  	}
  	setDomainVacationDelegate(domainAccountID, accountID, currentUserLogin ?? '', memberLogin, delegateLogin, vacationDelegate);
  	Navigation.goBack(ROUTES.DOMAIN_MEMBER_DETAILS.getRoute(domainAccountID, accountID));
  	};
  	return (
  	<DomainNotFoundPageWrapper domainAccountID={domainAccountID}>
  	<ScreenWrapper
  	enableEdgeToEdgeBottomSafeAreaPadding
  	testID="DomainMemberVacationDelegate"
  	>
  	<BaseVacationDelegateSelectionComponent
  	vacationDelegate={vacationDelegate}
  	headerTitle={translate('common.vacationDelegate')}
  	onSelectRow={onSelectRow}
  	onBackButtonPress={() => Navigation.goBack(ROUTES.DOMAIN_MEMBER_DETAILS.getRoute(domainAccountID, accountID))}
  	cannotSetDelegateMessage={translate('domain.members.cannotSetVacationDelegateForMember', memberLogin ?? '')}
  	additionalExcludeLogins={memberLogin ? {[memberLogin]: true} : undefined}

Why this solution is better than disabling the entry point

Disabling the entry point offline is safe, but too broad.

It also blocks flows that can still work or still provide value offline:

• opening the selector to view cached data
• deleting an existing delegate, which already uses API.write()

By moving the guard from navigation time to selection time, we keep the offline-capable parts of the feature available and only block the specific action that truly depends on the network.

What alternative solutions did you explore? (Optional)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022069063855085164009