[$250] iOS – Per Diem page does not autofocus the input field

[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: undefined
Reproducible in staging?: Yes
Reproducible in production?: undefined
If this was caught during regression testing, add the test name, ID and link from BrowserStack: undefined
Email or phone of affected tester (no customers): undefined
Issue reported by: Applause Internal Team
Bug source: undefined
Device used: undefined
App Component: undefined

Action Performed:

Preconditions: Have a workspace with Per Diem enabled.

1.Open the app
2.Press FAB -> Create expense.
3.Go to the Per Diem tab.

Expected Result:

The input field is autofocused and the keyboard appears.

Actual Result:

Per Diem page does not autofocus the input field

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7091006_1772299717277.ScreenRecording_02-28-2026_12-24-19_1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @suneox

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022032578464448900009
• Upwork Job ID: 2032578464448900009
• Last Price Increase: 2026-03-13

[MelvinBot]

Proposal

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

On iOS, when navigating to FAB → Create expense → Per Diem tab, the search input field is not autofocused and the keyboard does not appear. The user has to manually tap the input to begin searching for a per diem destination.

What is the root cause of that problem?

There are two bugs preventing autofocus:

Primary: DestinationPicker explicitly sets disableAutoFocus: true on the text input options passed to SelectionListWithSections (src/components/DestinationPicker.tsx:72). This prevents the SelectionList's built-in useFocusEffect autofocus mechanism in src/components/SelectionList/components/TextInput.tsx:88-103 from ever firing.

Secondary: IOURequestStepDestination has a backup focus mechanism via useImperativeHandle, but it eagerly captures a stale ref (src/pages/iou/request/step/IOURequestStepDestination.tsx:87-89):

focus: destinationSelectionListRef.current?.focusTextInput

At render time, destinationSelectionListRef.current is null (the child component hasn't mounted yet), so focus is set to undefined. When IOURequestStartPage's onTabSelectFocusHandler calls perDiemInputRef.current?.focus?.(), it invokes undefined and nothing happens.

Note: The search input only renders when there are ≥ 12 per diem destinations (CONST.STANDARD_LIST_ITEM_LIMIT). For workspaces with fewer destinations, there is no text input to focus.

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

1. In src/components/DestinationPicker.tsx, remove disableAutoFocus: true from the textInputOptions object (or set it to false). This allows the SelectionList's built-in useFocusEffect autofocus to work when the Per Diem tab gains navigation focus.

2. In src/pages/iou/request/step/IOURequestStepDestination.tsx, fix the stale ref in useImperativeHandle by changing the eager property access to a lazy getter function:

   • Change focus: destinationSelectionListRef.current?.focusTextInput to focus: () => destinationSelectionListRef.current?.focusTextInput() so the ref is read at call time rather than at render time.

What alternative solutions did you explore? (Optional)

An alternative would be to keep disableAutoFocus: true and instead fix only the imperative ref chain (the onTabSelectFocusHandler approach). However, this is more fragile because it relies on a hardcoded PER_DIEM_TAB_INDEX, requestAnimationFrame timing, and lazy-loaded tab mount timing. The SelectionList's built-in useFocusEffect autofocus is the standard pattern used by other selection lists and handles focus timing more robustly.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[misamikasa]

Proposal

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

On iOS, when the user navigates to FAB → Create expense → Per Diem tab, the search input field is not autofocused automatically and the keyboard never appears. The user must manually tap the field to begin searching for a destination.

What is the root cause of that problem?

After tracing the code, there are two independent bugs that each individually prevent autofocus. Both need to be fixed.

Bug 1 — disableAutoFocus: true in DestinationPicker.tsx

In src/components/DestinationPicker.tsx, the textInputOptions object passed to SelectionListWithSections explicitly disables autofocus:

// src/components/DestinationPicker.tsx, line 72
const textInputOptions = {
    value: searchValue,
    label: translate('common.search'),
    onChangeText: setSearchValue,
    disableAutoFocus: true,  // <-- this is the problem
    headerMessage: ...,
};

Inside src/components/SelectionList/components/TextInput.tsx, the useFocusEffect hook (lines 88–103) automatically focuses the input whenever the screen gains navigation focus. It has an early-return guard:

if (!shouldShowTextInput || disableAutoFocus) {
    return;  // autofocus never runs because disableAutoFocus is true
}

So even when the Per Diem tab becomes active, the auto-focus mechanism is unconditionally blocked.

Bug 2 — Stale ref in useImperativeHandle inside IOURequestStepDestination.tsx

IOURequestStartPage.tsx passes a perDiemInputRef (line 105) to <IOURequestStepDestination ref={perDiemInputRef} /> and then manually calls perDiemInputRef.current?.focus?.() when the Per Diem tab is selected (via onTabSelectFocusHandler, line 119–128).

Inside IOURequestStepDestination.tsx, useImperativeHandle wires up the focus function like this (lines 87–89):

useImperativeHandle(ref, () => ({
    focus: destinationSelectionListRef.current?.focusTextInput,
    //     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    // This reads `.current` eagerly at render time, when it's still null
}));

When useImperativeHandle runs on the first render, destinationSelectionListRef.current is null because the <DestinationPicker> child hasn't mounted yet. So focus is assigned undefined, and calling perDiemInputRef.current?.focus?.() does nothing.

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

Fix 1 — src/components/DestinationPicker.tsx

Remove disableAutoFocus: true from textInputOptions (or change it to false). This allows the SelectionListWithSections internal useFocusEffect to fire and auto-focus the input when the Per Diem tab is entered:

 const textInputOptions = {
     value: searchValue,
     label: translate('common.search'),
     onChangeText: setSearchValue,
-    disableAutoFocus: true,
     headerMessage: getHeaderMessageForNonUserList(destinationData.length > 0, debouncedSearchValue),
 };

Note: the search input only renders when destinationsCount >= CONST.STANDARD_LIST_ITEM_LIMIT (12), so this change only affects workspaces with 12 or more per diem destinations.

Fix 2 — src/pages/iou/request/step/IOURequestStepDestination.tsx

Change the useImperativeHandle to use a lazy getter (an arrow function) so the ref is read at call time, not at render time:

 useImperativeHandle(ref, () => ({
-    focus: destinationSelectionListRef.current?.focusTextInput,
+    focus: () => destinationSelectionListRef.current?.focusTextInput(),
 }));

This ensures that when onTabSelectFocusHandler calls perDiemInputRef.current?.focus?.(), the ref is read at that moment — after <DestinationPicker> has fully mounted and destinationSelectionListRef.current is populated.

What alternative solutions did you explore? (Optional)

• Fix only Bug 2 (imperative focus chain), skip Fix 1: We could keep disableAutoFocus: true and rely entirely on the onTabSelectFocusHandler → perDiemInputRef.current?.focus?.() call chain. However, fixing just one bug masks the other and leaves disableAutoFocus: true unexplained. Both bugs are real and should be fixed together, since they are independent code paths that could regress separately.

• Removing onTabSelectFocusHandler entirely and relying only on useFocusEffect: After Fix 1, the internal useFocusEffect in SelectionList/TextInput.tsx should handle autofocus automatically. However, keeping onTabSelectFocusHandler as a safety net for the backup focus path is fine and adds no harm.

[abbasifaizan70]

Proposal

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

When creating an expense from FAB and switching to the Per Diem tab on iOS, the destination search input is not auto-focused, so the keyboard does not open.

What is the root cause of that problem?

Per diem tab selection triggers perDiemInputRef.current?.focus?.(), but the forwarded ref from IOURequestStepDestination exposes focus as a captured value instead of a live callback.

RCA permalink (captured focus reference):

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Lines 87 to 89 in f94b213

	useImperativeHandle(ref, () => ({
	focus: destinationSelectionListRef.current?.focusTextInput,
	}));

Caller permalink (tab select focus trigger):

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

Lines 119 to 127 in f94b213

	const onTabSelectFocusHandler = ({index}: {index: number}) => {
	// We requestAnimationFrame since the function is called in the animate block in the web implementation
	// which fixes a locked animation glitch when swiping between tabs, and aligns with the native implementation internal delay
	requestAnimationFrame(() => {
	if (index !== PER_DIEM_TAB_INDEX) {
	return;
	}
	perDiemInputRef.current?.focus?.();
	});

If tab selection happens before the inner list ref is assigned, focus is undefined at capture time, so focus is skipped and keyboard does not appear.

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

Original code permalink:

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Lines 87 to 89 in f94b213

	useImperativeHandle(ref, () => ({
	focus: destinationSelectionListRef.current?.focusTextInput,
	}));

Suggested TypeScript change:

useImperativeHandle(ref, () => ({
    focus: () => destinationSelectionListRef.current?.focusTextInput(),
}));

This keeps the existing tab-select behavior unchanged, but resolves the latest inner ref at call time so focus works reliably on iOS.

[github-actions]

⚠️ @abbasifaizan70 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[isaacmusili64]

Proposal

Proposal

The issue appears to be caused by the input field not receiving focus after the Per Diem screen is mounted on iOS. In React Native, autofocus may fail when navigation transitions complete before the input reference becomes available.

Proposed Solution

1. Identify the TextInput used for entering the Per Diem value in the Per Diem page component.
2. Create a ref for the input field using "useRef".
3. Use "useFocusEffect" (from "@react-navigation/native") or "useEffect" triggered on screen focus to ensure the focus is applied after navigation completes.
4. Programmatically focus the input using "inputRef.current.focus()".

Example Approach

const inputRef = useRef(null);

useFocusEffect(
React.useCallback(() => {
const timer = setTimeout(() => {
inputRef.current?.focus();
}, 100);
return () => clearTimeout(timer);
}, [])
);

This ensures the focus is triggered after the screen transition is complete, which resolves the iOS autofocus issue.

Testing Plan

I will verify the fix on:

• iOS simulator
• Android (to confirm no regression)
• Web platform if applicable

Steps:

1. Navigate to the Per Diem page.
2. Confirm that the input field automatically receives focus.
3. Ensure the keyboard opens automatically on iOS.

Screenshots and testing confirmation will be included in the pull request.

This approach should restore the expected autofocus behavior without introducing regressions on other platforms.

[melvin-bot]

📣 @isaacmusili64! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>