[$250] iOS - Chat does not scroll down to show edit composer, suggestion list is hidden behind keyboard

[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.65-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): jsdonisjondjosd@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Have at least a workspace

1. Launch Expensify app
2. Open FAB > Create report
3. Send a message in the empty report
4. Long tap on the message > Edit comment
5. Tap outside the composer to close the keyboard
6. Tap on the edit composer
7. Note that the report view does not scroll down to reveal the edit composer
8. Type @ or :sm in the edit composer

Expected Result:

In Step 7, the report view will scroll down to reveal the edit composer when the edit composer is focused
In Step 8, the suggestion list will appear above the edit composer

Actual Result:

In Step 7, the report view does not scroll down to reveal the edit composer when the edit composer is focused
In Step 8, the suggestion list is partially hidden behind the keyboard

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

Bug6858035_1749736661403.ScreenRecording_06-12-2025_21-52-15_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021933546424749852553
• Upwork Job ID: 1933546424749852553
• Last Price Increase: 2025-06-13

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

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

[thelullabyy]

Proposal

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

• Chat does not scroll down to show edit composer

What is the root cause of that problem?

• We already have logic to scroll to the editing message on focus:
  

  App/src/pages/home/report/ReportActionItemMessageEdit.tsx

  Lines 473 to 477 in 892fff8

  	InteractionManager.runAfterInteractions(() => {
  	requestAnimationFrame(() => {
  	reportScrollManager.scrollToIndex(index, true);
  	});
  	});

• The scrollToIndex function being used:
  

  App/src/hooks/useReportScrollManager/index.native.ts

  Line 19 in 892fff8

  flatListRef.current.scrollToIndex({index});

  
  defaults the viewPosition to 0. According to the documentation:

  scrollToIndex: Scrolls to the item at the specified index such that it is positioned in the viewable area.
  viewPosition of 0 places it at the top, 1 at the bottom, and 0.5 centers it.
  Cannot scroll to locations outside the render window without getItemLayout.

• This works well for InvertedFlatList, but on the page experiencing this bug, we are using a regular FlatList. Thus, viewPosition: 0 causes the item to be scrolled to the top, which is not ideal when trying to reveal the composer near the bottom of the screen.

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

• We need to update the scroll manager function:
  

  App/src/hooks/useReportScrollManager/index.native.ts

  Line 13 in 892fff8

  const scrollToIndex = useCallback(

const scrollToIndex = useCallback(
    (index: number, isEditing?: boolean, isInvertedList?: true) => {
        if (!flatListRef?.current) {
            return;
        }

        flatListRef.current.scrollToIndex({ index, viewPosition: isInvertedList ? 0 : 1 });
    },
    [flatListRef],
);

• When calling scrollToIndex in contexts using FlatList, explicitly pass the third parameter as false to ensure the item is scrolled into view at the bottom.

• Additionally, the current logic attempts to ensure the keyboard is visible before calling scrollToIndex using InteractionManager.runAfterInteractions and requestAnimationFrame. However, these do not guarantee the keyboard is fully visible
  

  App/src/pages/home/report/ReportActionItemMessageEdit.tsx

  Lines 473 to 477 in 892fff8

  	InteractionManager.runAfterInteractions(() => {
  	requestAnimationFrame(() => {
  	reportScrollManager.scrollToIndex(index, true);
  	});
  	});

• Instead, we should use the waitForKeyboardToShow utility introduced here:
  withKeyboardState.tsx

const waitForKeyboardToShow = useCallback((): Promise<void> => {
    return new Promise((resolve) => {
        if (isKeyboardActive || !isKeyboardAnimatingRef.current) {
            resolve();
            return;
        }

        const subscription = KeyboardEvents.addListener('keyboardDidShow', () => {
            resolve();
            subscription.remove();
        });
    });
}, [isKeyboardActive]);

• Replace the current scrolling logic with the following to ensure scrolling occurs only after the keyboard is fully visible:

waitForKeyboardToShow().then(() => {
    reportScrollManager.scrollToIndex(index, true);
});

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

• NA

[joekaufmanexpensify]

Reproduced.

[melvin-bot]

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

[melvin-bot]

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

[shubham1206agra]

@kirillzyusko Would you like to look into this? Since you implemented keyboard behavior in iOS.

[kirillzyusko]

@shubham1206agra I'm currently busy with other work, but I believe @chrispader or @perunt can help here 😊🙌

[chrispader]

i'll be able to look into this by the end of the week. If this needs to be handled more urgently, maybe @perunt or somebody else can work on this! 🙌🏼