[HOLD for payment 2024-10-11] [$250] mWeb - Search - Holding on a pinned message scrolls the page

[IuliiaHerets]

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.0.39-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Issue was found when executing this PR: #49186
Email or phone of affected tester (no customers): nathanmulugetatesting+1580@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Start a chat with multiple accounts
3. Pin every chat
4. Go to search > Chat > Pinned tab
5. Scroll down a bit and hold down on a message

Expected Result:

Nothing happens

Actual Result:

The page scrolls a bit

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6609929_1726837109164.Screen_Recording_20240920_155420_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837159344756059487
• Upwork Job ID: 1837159344756059487
• Last Price Increase: 2024-09-20
• Automatic offers:
• c3024 | Reviewer | 104202793

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (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]

Triggered auto assignment to @Beamanator (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[luacmartins]

This is a pretty edge case scenario. I think we can demote it to NAB

[melvin-bot]

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

[Beamanator]

agreed!

[melvin-bot]

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

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-09-23 17:47:26 UTC.

Proposal

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

Long press on a chat item scrolls the page.

What is the root cause of that problem?

When we long press on the chat item, the item receives the focus event. When the item receives the focus, it will update the arrow key focus index to the item index which will scroll the list to the focused item/index.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 467 to 472 in ffeda71

	onFocus={() => {
	if (isDisabled) {
	return;
	}
	setFocusedIndex(normalizedIndex);
	}}

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 272 to 279 in ffeda71

	const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
	initialFocusedIndex: flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey),
	maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage - 1),
	disabledIndexes: disabledArrowKeyIndexes,
	isActive: isFocused,
	onFocusedIndexChange: (index: number) => {
	scrollToIndex(index, true);
	},

This happens to start chat page too and other page that uses the same list component. This doesn't happen to report/expense search because long pressing opens a modal.

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

We can create a new ref called isLongPressRef which we will set to true when long pressing,

onLongPressRow={(item) => {
    isLongPressRef.current = true;
    onLongPressRow?.(item);
}}

then, ignore the focus event if it's triggered by the long press.

onFocus={() => {
    if (isLongPressRef.current || isDisabled) {
        isLongPressRef.current = false;
        return;
    }
    setFocusedIndex(normalizedIndex);
}}

Since this behavior is only happening in chrome, we can keep this solution to chrome only (isMobileChrome())

Alternatively, we can let the onFocus calls the setFocusedIndex to update the arrow key focus index, but ignore the onFocusedIndexChange. This way, the arrow key focus index is updated, but no scroll will happen.

[melvin-bot]

@Beamanator, @VictoriaExpensify, @c3024 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[QichenZhu]

When the item receives the focus, it will update the arrow key focus index to the item index which will scroll the list to the focused item/index.

Why does the list still scroll if the focused item is already visible?

[VictoriaExpensify]

Are we still wanting proposals since this has been demoted? @Beamanator ?

[c3024]

I think this issue is demoted from being a deploy blocker to an ordinary issue that can be handled by external contributions with less urgency.

I will check and update on the proposal.

[melvin-bot]

📣 @c3024 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @c3024

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.44-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix holding on a message in search page scrolls the page #49970

If no regressions arise, payment will be issued on 2024-10-11. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment through NewDot Manual Requests
• @c3024 requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@c3024] The PR that introduced the bug has been identified. Link to the PR:
• [@c3024] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@c3024] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@c3024] Determine if we should create a regression test for this bug.
• [@c3024] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@VictoriaExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[VictoriaExpensify]

Payment Summary:
Contributor: @bernhardoj owed $250 via NewDot
Contributor+: @c3024 - please complete the checklist so I can organise payment - thanks!

[bernhardoj]

Requested in ND.

[c3024]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@c3024] The PR that introduced the bug has been identified. Link to the PR: This is a bug peculiar to Android Chrome. No PR can be held responsible.
• [@c3024] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: NA
• [@c3024] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: No discussion was started because this could not have been identified earlier.
• [@c3024] Determine if we should create a regression test for this bug. Yes
• [@c3024] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

Applicable only for Android Chrome

1. Logon to ND
2. Click on 'Search' in bottom tab bar.
3. Click on 'Chats' on left pane.
4. Long press on a message on the center pane.
5. Verify that the message list doesn't scroll.

[c3024]

@VictoriaExpensify, checklist completed. Thanks!

[JmillsExpensify]

$250 approved for @bernhardoj

[melvin-bot]

@Beamanator, @bernhardoj, @VictoriaExpensify, @c3024 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[VictoriaExpensify]

Payment summary:
Contributor+: @c3024 paid $250 via Upwork