[Due for payment 2025-08-11] [$250] Android - Expense - Trying to scroll Per diem search result on create expense flow directs to distance tab

[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: 9.1.78-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #64212
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch app
2. Go to workspace settings - more features - enable permission diem
3. Upload perdiem file attached below
4. Open workpace chat
5. Tap plus icon from compose box - create expense - per diem
6. Enter some text in search box like - sa
7. Try to scroll the results

Expected Result:

Trying to scroll Per diem search results on create expense flow must allow user to scroll the page

Actual Result:

Trying to scroll Per diem search results on create expense flow directs to distance tab

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

Bug6882449_1752067941103.Screenrecorder-2025-07-09-18-55-10-386.mp4

German Per Diem - Dependent Tags_ (2).csv

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021944822085787870929
• Upwork Job ID: 1944822085787870929
• Last Price Increase: 2025-07-14

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[Eskalifer1]

Proposal

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

Android - Expense - Trying to scroll Per diem search result on create expense flow directs to distance tab

What is the root cause of that problem?

This happens because we use OnyxTabNavigator:

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

Lines 199 to 211 in cbd68df

	<OnyxTabNavigator
	id={CONST.TAB.IOU_REQUEST_TYPE}
	defaultSelectedTab={defaultSelectedTab}
	onTabSelected={resetIOUTypeIfChanged}
	tabBar={TabSelector}
	onTabBarFocusTrapContainerElementChanged={setTabBarContainerElement}
	onActiveTabFocusTrapContainerElementChanged={setActiveTabContainerElement}
	shouldShowLabelWhenInactive={!shouldShowPerDiemOption}
	shouldShowProductTrainingTooltip={shouldShowProductTrainingTooltip}
	renderProductTrainingTooltip={renderProductTrainingTooltip}
	lazyLoadEnabled
	disableSwipe={isMultiScanEnabled && selectedTab === CONST.TAB_REQUEST.SCAN}
	>

And on the page with per diem swipe enabled, when the search filter is performed, the number of items decreases to the point that there is no list scroll anymore, and if you scroll not exactly down, but a little to the left, we will go to the next tab, if there are more items, the list will scroll

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

1. We should pass shouldEnableKeyboardAvoidingView true for per Diem page

shouldEnableKeyboardAvoidingView={selectedTab === CONST.TAB_REQUEST.PER_DIEM}

2. shouldEnableKeyboardAvoidingView will only allow scrolling on native devices, so you need to add shouldEnableMaxHeight to make it work in the browser as well:

shouldEnableMaxHeight={selectedTab === CONST.TAB_REQUEST.PER_DIEM}

We can also change this default behavior to not hide keyboard onScroll for this page:
Native devices:

App/src/components/SelectionList/index.native.tsx

Line 13 in 03ad77d

onScrollBeginDrag={() => Keyboard.dismiss()}

Others:

App/src/components/SelectionList/index.tsx

Line 65 in d49220a

Keyboard.dismiss();

This function can be called dynamically depending on the parameter, which will be true by default, but for this page we will make it false

Additionally We can disable the swipe for the perDiem page:

disableSwipe={(isMultiScanEnabled && selectedTab === CONST.TAB_REQUEST.SCAN) || selectedTab === CONST.TAB_REQUEST.PER_DIEM}

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

None, UI bug

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[thelullabyy]

Proposal

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

• Attempting to scroll through Per Diem search results in the create expense flow unintentionally switches to the Distance tab.

What is the root cause of that problem?

• The OnyxTabNavigator allows users to swipe horizontally to switch between tabs:
  

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

  Line 199 in e20d305

  <OnyxTabNavigator

• However, the Per Diem tab contains a scrollable list:
  

  App/src/components/DestinationPicker.tsx

  Line 74 in e20d305

  <SelectionList

• When a user tries to scroll vertically through this list, if their swipe gesture isn't perfectly vertical, it can unintentionally trigger the horizontal tab switch due to the OnyxTabNavigator's swipe behavior.

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

• We should disable horizontal swiping while the list is being scrolled. To achieve this:

1. Add the scroll event emitter in the DestinationPicker component:

const triggerScrollEvent = useScrollEventEmitter();

2. Pass the scroll handler to the SelectionList component:

<SelectionList
    ...
    onScroll={triggerScrollEvent}
/>

This should be done here:

App/src/components/DestinationPicker.tsx

Line 74 in e20d305

<SelectionList

Similarly, apply the same logic here:

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

Line 92 in e20d305

<SelectionList

3. In the IOURequestStartPage component, add a useEffect to listen for the scroll event:

const [isScrolling, setIsScrolling] = useState(false);

useEffect(() => {
    const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (data) => {
        setIsScrolling(data.isScrolling);
    });

    return () => scrollingListener.remove();
}, []);

This should be added here:

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

Line 167 in e20d305

4. Update the condition for disabling swiping:

disableSwipe={(isMultiScanEnabled && selectedTab === CONST.TAB_REQUEST.SCAN) || isScrolling}

This change should be made here:

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

Line 210 in e20d305

disableSwipe={isMultiScanEnabled && selectedTab === CONST.TAB_REQUEST.SCAN}

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

• NA

What alternative solutions did you explore? (Optional)

[melvin-bot]

@CortneyOfstad Eep! 4 days overdue now. Issues have feelings too...

[CortneyOfstad]

Getting eyes!

[melvin-bot]

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