[$250] Web - Chat - Keyboard scroll behavior is reversed between long conversations and the icon board

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.84-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5446551
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Windows 11 / Chrome
App Component: Other

Action Performed:

1. Open the http://staging.new.expensify.com
2. Log in with a regular account (gmail). If unsure what this is, reach out to TTL in Slack
3. Navigate to a chat that has a lot of messages in the conversation history
4. Press the down button on the keyboard and vice versa
5. Click on the icon board
6. Press the down button on the keyboard and vice versa

Expected Result:

The keyboard text movement should function consistently in both long conversations and the icon board.

Actual Result:

In a long conversation, pressing the down button on the keyboard causes the conversation to scroll up, and vice versa. This behavior is the opposite when navigating the keyboard on the icon board.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6712802_1736742681045.KeyboardNavigateLongConvosation.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021881814770791463580
• Upwork Job ID: 1881814770791463580
• Last Price Increase: 2025-01-21

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

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

[NJ-2020]

Proposal

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

Web - Chat - Keyboard scroll behavior is reversed between long conversations and the icon board

What is the root cause of that problem?

It's because inside the ReportActionsList we use InvertedFlatlist

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

Lines 743 to 744 in 4bcdc7e

	<InvertedFlatList
	accessibilityLabel={translate('sidebarScreen.listOfChatMessages')}

Inside InvertedFlatlist we pass inverted prop to invert the flatlist which also invert the scrolling behaviour see the docs here

App/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

Lines 29 to 34 in 4bcdc7e

	<FlatList
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...rest}
	ref={ref}
	maintainVisibleContentPosition={maintainVisibleContentPosition}
	inverted

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

We should use scale transforms -1 style instead of passing the inverted prop

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@muttmuure 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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

[melvin-bot]

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

[huult]

Proposal

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

Keyboard scroll behavior is reversed between long conversations and the icon board

What is the root cause of that problem?

This ticket is same with #8612

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

Waiting fix by react-native facebook/react-native#35263 necolas/react-native-web#2233

or apply the WorkArrow solution implemented directly from https://github.com/staltz/manyverse/blob/master/patches/react-native-web%2B0.18.9.patch

Code changed like this pr https://github.com/Expensify/App/pull/9126/files

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

None

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.

[hungvu193]

Update: I'll review the proposals tomorrow.

[hungvu193]

🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @AndrewGable, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[hungvu193]

Thanks. I believe @huult has pointed out the correct RCA and solution, this issue is a dupe of #8612.

@AndrewGable It was marked as low priority and not fixed in the past, so let me know if you think otherwise. If so we can go ahead with @huult 's proposal here

[AndrewGable]

Thoughts on priority on this @muttmuure ?

[melvin-bot]

@AndrewGable @hungvu193 @muttmuure this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@AndrewGable, @hungvu193, @muttmuure Huh... This is 4 days overdue. Who can take care of this?

[muttmuure]

Seems like it's definitely a bug, but I feel like it sits with #expense as a Chat bug. I'm not convinced this is a cohort bug or general platform quality deficiency

[melvin-bot]

@AndrewGable, @hungvu193, @muttmuure Eep! 4 days overdue now. Issues have feelings too...

[hungvu193]

Not overdue

[huult]

@muttmuure Do we want to fix it using the Workarrow solution from my proposal?

[melvin-bot]

@AndrewGable @hungvu193 @muttmuure this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot]

@AndrewGable, @hungvu193, @muttmuure 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[hungvu193]

not overdue

[melvin-bot]

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

[melvin-bot]

@AndrewGable, @hungvu193, @Christinadobrzyn Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Christinadobrzyn]

@muttmuure is away on paternity leave, so I'm just catching up here. @hungvu193 can you provide a summary of the status so we can determine next steps? TY!

[Christinadobrzyn]

Sorry can I get an update on where we are with this, I'm trying to catch up. We have some proposals, are we reviewing those?

[hungvu193]

Sorry can I get an update on where we are with this, I'm trying to catch up. We have some proposals, are we reviewing those?

it's a dupe of #8612 and we decided not to fix it before. You can check out the convo in that issue and then let me know if we decide to fix it, otherwise we can just close it 😄

[Christinadobrzyn]

Ah thank you @hungvu193! We will close this without action based on the discussion here - #8612 (comment)