[HOLD for payment 2024-11-18] [$250] [Search v2.2] - Chats - Selected chat is hidden when navigating via keyboard

[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: 9.0.31-14
Reproducible in staging?: Y
Reproducible in production?: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Account has many chats.

1. Go to staging.new.expensify.com
2. Go to Search > Chats.
3. Navigate to the bottom of the list via keyboard up button.

Expected Result:

The selected chat will be not hidden when navigating via keyboard.

Actual Result:

The selected chat is hidden when navigating via keyboard.
This issue happens with the chat at the bottom of the list.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6598844_1725981162147.20240910_230910.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833559992291211111
• Upwork Job ID: 1833559992291211111
• Last Price Increase: 2024-10-22
• Automatic offers:
• rayane-djouah | Reviewer | 104633457

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[melvin-bot]

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

[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.

[marcochavezf]

I don't see the Chats section in Search tab in production:

Seems this is a new feature and I don't think it should block the deploy

[melvin-bot]

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

[melvin-bot]

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

[Nodebrute]

@marcochavezf I am unable to reproduce this issue on latest main

Screen.Recording.2024-09-10.at.10.59.35.PM.mov

[Amoralchik]

Edited by proposal-police: This proposal was edited at 2024-09-10 21:07:46 UTC.

Proposal

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

The element selected using the keyboard is outside the visible area.

What is the root cause of that problem?

In useArrowKeyFocusManager, for the up and down arrows, we call the scrollToIndex function within onFocusedIndexChange, which scrolls to the selected element.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 273 to 282 in 41e6968

	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);
	},
	isFocused,
	});

scrollToLocation isn't functioning correctly due to variations in element sizes, caused by the offset in getItemLayout not accurately reflecting the distance between elements. This is due to the offset being set here:

App/src/components/Search/index.tsx

Lines 149 to 151 in a8b5914

	if (SearchUtils.isTransactionListItemType(item) || SearchUtils.isReportActionListItemType(item)) {
	return isLargeScreenWidth ? variables.optionRowHeight + listItemPadding : transactionItemMobileHeight + listItemPadding;
	}

to be the same as for Transactions.

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

First, I would remove scrollToIndex from onFocusedIndexChange since I don’t see the point in keeping it (see optional).

We can set a fixed height for all elements or somehow determine the height of the component and store this data in reportAction. Then, we can retrieve it in getItemHeight.

proof of concept:

2024-09-11.18-55-07.mp4

What alternative solutions did you explore? (Optional)

I propose removing scrollToIndex from onFocusedIndexChange, as it only handles scrolling, and without it, I noticed everything works correctly.

code after:

    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: () => {},
        isFocused,
    });

proof of concept:

2024-09-10.22-55-20.mp4

[1subodhpathak]

I am able to reproduce this problem!

Recording.2024-09-11.195526.mp4

But observed one thing, it only happens when the chat size greater than initialy defined is selected

See this

[Amoralchik]

Update Proposal

[isabelastisser]

@rayane-djouah, are you still able to reproduce this? Thanks!

[rayane-djouah]

I'm able to reproduce

Screen.Recording.2024-09-11.at.11.48.46.PM.mov

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[rayane-djouah]

Reviewing now 👀

[melvin-bot]

📣 @rayane-djouah 🎉 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

[melvin-bot]

📣 @tushar-a-b You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[tushar-a-b]

@rayane-djouah,
Should I go with main solution where we will remove ListHeader & ListFooter layouts and consider one previous item for viewOffset as explained in my proposal or with alternative one where we will keep ListHeader & ListFooter layouts and calculate viewOffset by considering two previous items like I did in my test branch.
what do you think?

[rayane-djouah]

@tushar-a-b I prefer the alternative solution because it seems to be the safest option

[tushar-a-b]

@rayane-djouah, PR is ready for a review 👍.

[isabelastisser]

@rayane-djouah any updates? Thanks!

[rayane-djouah]

PR looks good to me

[rayane-djouah]

Merged

[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.59-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Chats - Selected chat is hidden when navigating via keyboard #51754

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

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

• @tushar-a-b requires payment (Needs manual offer from BZ)
• @rayane-djouah requires payment automatic offer (Reviewer)

[melvin-bot]

@rayane-djouah @isabelastisser The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[rayane-djouah]

BugZero Checklist:

• Classify the bug:

  Bug classification

  Source of bug:

  • 1a. Result of the original design (eg. a case wasn't considered)
  • 1b. Mistake during implementation
  • 1c. Backend bug
  • 1z. Other:

  Where bug was reported:

  • 2a. Reported on production
  • 2b. Reported on staging (deploy blocker)
  • 2c. Reported on a PR
  • 2z. Other:

  Who reported the bug:

  • 3a. Expensify user
  • 3b. Expensify employee
  • 3c. Contributor
  • 3d. QA
  • 3z. Other:

• 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: Implemented chat type in search #47690 (comment)

• If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: N/A

• If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• @isabelastisser Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

#### Precondition:

- The account contains many chats.
- Some messages in the chats are large.


#### Test:

1. Go to "Search" > "Chats".
2. Navigate through the list using the keyboard's up and down buttons.
3. Verify that the selected chat is not hidden when navigating via keyboard.

Do we agree 👍 or 👎

[isabelastisser]

Payment summary:

@tushar-a-b requires payment - Offer sent in Upwork - $250
@rayane-djouah requires payment automatic offer (Reviewer) $250 paid

[isabelastisser]

All set!