[HOLD for payment 2024-06-05] [$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key #41570

izarutskaya · 2024-05-03T10:45:47Z

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: 1.4.70-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Go to staging.new.expensify.com
Create a group chat.
Click on the tap header > Members.
Navigate through member list by keyboard up and down key.
Note that admin cannot be navigated with up and down key and is not highlighted.
Click on the admin.
Click back button.
Note that admin is highlighted.
Now navigate through member list with Tab key.

Expected Result:

There should be consistency in whether group admin row can be highlighted.

Actual Result:

In Step 4, group admin cannot be selected and highlighted by keyboard up and down key.
In Step 7, when clicking on the group admin with cursor, the group admin is selected and highlighted.
In Step 9, with Tab key, group admin can be selected and highlighted.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Bug6469867_1714729821811.20240503_174407.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~012cce511dc289f3d0
Upwork Job ID: 1786399061346992128
Last Price Increase: 2024-05-03
Automatic offers:

DylanDylann | Contributor | 0
bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @puneetlath

melvin-bot · 2024-05-03T10:45:58Z

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

izarutskaya · 2024-05-03T10:46:20Z

We think this issue might be related to the #vip-vsb.

Krishna2323 · 2024-05-03T10:57:14Z

Proposal

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

Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key

What is the root cause of that problem?

The option is included in disabledOptionsIndexes if item.isDisabledCheckbox is true but that doesn't makes sense because the item can be still clickable/selectable only checkbox should be disabled.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 134 to 136 in 0f39e43

    
           if (!!section.isDisabled || item.isDisabled || item.isDisabledCheckbox) { 
        
               disabledOptionsIndexes.push(disabledIndex); 
        
           }

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

Remove item.isDisabledCheckbox check.

What alternative solutions did you explore? (Optional)

bernhardoj · 2024-05-03T12:16:16Z

Proposal

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

We can highlight the admin member in group participants page with Tab key or when clicking it to open the detail and go back.

What is the root cause of that problem?

In group member/participant, the checkbox will be disabled if it's the current user, which means the item itself is still enabled, only the checkbox is disabled.

App/src/pages/ReportParticipantsPage.tsx

Line 94 in 0f39e43

isDisabledCheckbox: accountID === currentUserAccountID,

So, we can use TAB key to focus on the item, and isItemFocused will be true because it's not disabled.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 341 to 342 in 0f39e43

    
           const isDisabled = !!section.isDisabled || item.isDisabled; 
        
           const isItemFocused = !isDisabled && (focusedIndex === normalizedIndex || itemsToHighlight?.has(item.keyForList ?? ''));

But we can't focus on it with the arrow key because it's included in the disabledOptionsIndexes.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 134 to 136 in 0f39e43

    
           if (!!section.isDisabled || item.isDisabled || item.isDisabledCheckbox) { 
        
               disabledOptionsIndexes.push(disabledIndex); 
        
           }

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 230 to 233 in 0f39e43

    
           const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({ 
        
               initialFocusedIndex: flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey), 
        
               maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage - 1), 
        
               disabledIndexes: flattenedSections.disabledOptionsIndexes,

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

If the expectation is to allow the user to focus on the item that only has a checkbox disabled with the arrow key, then we can either

Filter out the disabled indexes that have the disabled checkbox value as true.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 233 in 0f39e43

disabledIndexes: flattenedSections.disabledOptionsIndexes,

disabledIndexes: flattenedSections.disabledOptionsIndexes.filter((index) => !flattenedSections.allOptions[index].isDisabledCheckbox),

Or create a new disabled indexes array (disabledArrowKeyOptionsIndexes) for the arrow key that doesn't contain the checkbox disabled item.

if (!!section.isDisabled || item.isDisabled || item.isDisabledCheckbox) {
    disabledOptionsIndexes.push(disabledIndex);
    if (!item.isDisabledCheckbox) {
        disabledArrowKeyOptionsIndexes.push(disabledIndex);
    }
}

We need to keep the disabledOptionsIndexes as is, otherwise, the select all button will be enabled even if the only member left is the admin.

If the expectation is to prevent the disabled checkbox item from being focused/highlighted, then we need to add it to the disabled condition here.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 341 to 342 in 0f39e43

    
           const isDisabled = !!section.isDisabled || item.isDisabled; 
        
           const isItemFocused = !isDisabled && (focusedIndex === normalizedIndex || itemsToHighlight?.has(item.keyForList ?? ''));

const isItemFocused = (!isDisabled && !item.isDisabledCheckbox) && ...

but it will still be able to have the blue outline focus (when we use TAB) because the pressable is not disabled.

melvin-bot · 2024-05-03T14:15:02Z

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

melvin-bot · 2024-05-03T14:15:06Z

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

dragnoir · 2024-05-06T13:45:22Z

Proposal

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

Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key

What is the root cause of that problem?

The BaseSelectionList component doesn't allow the keyboard to navigate through items with a disabled checkbox

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 134 to 136 in cd9a9ad

    
           if (!!section.isDisabled || item.isDisabled || item.isDisabledCheckbox) { 
        
               disabledOptionsIndexes.push(disabledIndex); 
        
           }

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

If we remove the item.isDisabledCheckbox here the disabledOptionsIndexes will be missing one item and that will cause many regressions like when all members removed, and only admin on the list, the Select all checkbox will not be disabled.

We can add a new prop to BaseSelectionList like shouldAllowAllKeyboardNavigation default to false
and pass it to the page ReportParticipantsPage

App/src/pages/ReportParticipantsPage.tsx

Lines 345 to 358 in cd9a9ad

    
           <SelectionList 
        
               ref={selectionListRef} 
        
               canSelectMultiple={isGroupChat && isCurrentUserAdmin} 
        
               sections={[{data: participants}]} 
        
               ListItem={TableListItem} 
        
               headerContent={headerContent} 
        
               onSelectRow={openMemberDetails} 
        
               onCheckboxPress={(item) => toggleUser(item.accountID)} 
        
               onSelectAll={() => toggleAllUsers(participants)} 
        
               showScrollIndicator 
        
               textInputRef={textInputRef} 
        
               customListHeader={customListHeader} 
        
               listHeaderWrapperStyle={[styles.ph9]} 
        
           />

When the new prop is true, we tell the useArrowKeyFocusManager here to navigate throw all elements

const [focusedIndex, setFocusedIndex] =  useArrowKeyFocusManager({
  initialFocusedIndex:  flattenedSections.allOptions.findIndex((option) =>  option.keyForList  ===  initiallyFocusedOptionKey),
  maxIndex:  Math.min(flattenedSections.allOptions.length  -  1, CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH  *  currentPage  -  1),
- disabledIndexes: flattenedSections.disabledOptionsIndexes,
+ disabledIndexes:  shouldAllowAllKeyboardNavigation  ? [] :  flattenedSections.disabledOptionsIndexes,
  isActive:  true,
  // ...
});

In our example, we should allow the user to be able to navigate through all items, because even if some items are disabled, the user can go through the details page to see more details about their profile.

By adding this new props, we get rid of complexity and conflicts and we simply allow the keyboard to navigate throw all items.

Santhosh-Sellavel · 2024-05-06T17:00:40Z

Asked for volunteers to pick this up here

Santhosh-Sellavel · 2024-05-06T17:03:06Z

Unassigned myself due to less bandwidth

DylanDylann · 2024-05-06T17:05:37Z

I will take over this one as C+

melvin-bot · 2024-05-06T17:38:08Z

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

puneetlath · 2024-05-06T17:39:59Z

Putting the Help Wanted label back on. @DylanDylann is taking the C+ role, so we're still looking for a contributor.

DylanDylann · 2024-05-07T15:21:11Z

Before evaluating proposals, we need to confirm the expectation first with @Expensify/design

Let's see the tab key behavior, when clicking the tab key we will focus on the member border

In here, If we click enter, the detail member will open
On the other hand, If we click the tab key one more time, the checkbox will be focused

Here, if we click enter, the checkbox will be selected

IMO, the current behavior is correct

Let's see the up/down behavior, when clicking the down/up key we will focus on the member border

Here, If we click enter, the detail member will open. If we click the down/up key one more time, the App will focus on the next member border (If the next member border is admin, we will skip it and go to the next item)

Screen.Recording.2024-05-07.at.22.19.38.mov

IMO, with the current behavior, when clicking up/down key we shouldn't skip the admin member because we allow user to open the detail page of the admin

dragnoir · 2024-05-07T15:26:28Z

Tab navigation will be handled here #36476
I think we should focus on arrow keys.

dannymcclain · 2024-05-07T16:01:05Z

IMO, with the current behavior, when clicking up/down key we shouldn't skip the admin member because we allow user to open the detail page of the admin

I agree with this. I would expect to be able to arrow through the list and hit enter to open each member's profile.

DylanDylann · 2024-05-09T10:04:14Z

@Krishna2323 Your proposal will make the select all button break
@dragnoir When we pass an empty array to disabledIndexes, we miss the disabled item (section.isDisabled || item.isDisabled)
I like @bernhardoj's solution 2. Let's go with them

🎀👀🎀 C+ reviewed

melvin-bot · 2024-05-09T10:04:24Z

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

melvin-bot · 2024-05-09T23:56:55Z

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

bernhardoj · 2024-05-10T09:28:08Z

PR is ready

cc: @DylanDylann

melvin-bot · 2024-05-29T09:16:21Z

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

melvin-bot · 2024-05-29T09:16:25Z

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

Fix can't navigate with arrow key to admin in group members page #41968

If no regressions arise, payment will be issued on 2024-06-05. 🎊

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

@bernhardoj requires payment automatic offer (Contributor)
@DylanDylann requires payment automatic offer (Contributor)

melvin-bot · 2024-05-29T09:16:26Z

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:

[@DylanDylann] The PR that introduced the bug has been identified. Link to the PR:
[@DylanDylann] 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:
[@DylanDylann] 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:
[@DylanDylann] Determine if we should create a regression test for this bug.
[@DylanDylann] 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.
[@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

DylanDylann · 2024-06-05T04:32:05Z

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:

[@DylanDylann] The PR that introduced the bug has been identified. Link to the PR: NA
[@DylanDylann] 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
[@DylanDylann] 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: NA
[@DylanDylann] Determine if we should create a regression test for this bug. Yes
[@DylanDylann] 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

Prerequisite: Create a new group chat

Open the group chat
Press the header to open the detail and press Members
Use arrow key/down to navigate between the list
Verify it can highlight the admin member.

Do we agree 👍 or 👎

puneetlath · 2024-06-05T13:53:33Z

Issue for regression test: https://github.com/Expensify/Expensify/issues/402260

Everyone has been paid. Thanks y'all!

izarutskaya added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels May 3, 2024

melvin-bot bot assigned puneetlath May 3, 2024

puneetlath added the External Added to denote the issue can be worked on by a contributor label May 3, 2024

melvin-bot bot changed the title ~~Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key~~ [$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key May 3, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label May 3, 2024

melvin-bot bot assigned Santhosh-Sellavel May 3, 2024

puneetlath added this to [#whatsnext] #vip-vsb May 3, 2024

melvin-bot bot added the Overdue label May 6, 2024

Santhosh-Sellavel removed their assignment May 6, 2024

melvin-bot bot removed the Overdue label May 6, 2024

puneetlath assigned DylanDylann May 6, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label May 6, 2024

puneetlath added the Help Wanted Apply this label when an issue is open to proposals by contributors label May 6, 2024

puneetlath assigned bernhardoj May 9, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label May 9, 2024

bernhardoj mentioned this issue May 10, 2024

Fix can't navigate with arrow key to admin in group members page #41968

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels May 10, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels May 29, 2024

melvin-bot bot changed the title ~~[$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key~~ [HOLD for payment 2024-06-05] [$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key May 29, 2024

melvin-bot bot removed the Reviewing Has a PR in review label May 29, 2024

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Jun 4, 2024

puneetlath closed this as completed Jun 5, 2024

melvin-bot bot removed the Overdue label Jun 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2024-06-05] [$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key #41570

[HOLD for payment 2024-06-05] [$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key #41570

izarutskaya commented May 3, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented May 3, 2024

izarutskaya commented May 3, 2024

Krishna2323 commented May 3, 2024

bernhardoj commented May 3, 2024

melvin-bot bot commented May 3, 2024

melvin-bot bot commented May 3, 2024

dragnoir commented May 6, 2024

Santhosh-Sellavel commented May 6, 2024

Santhosh-Sellavel commented May 6, 2024

DylanDylann commented May 6, 2024

melvin-bot bot commented May 6, 2024

puneetlath commented May 6, 2024

DylanDylann commented May 7, 2024 •

edited

Loading

dragnoir commented May 7, 2024 •

edited

Loading

dannymcclain commented May 7, 2024

DylanDylann commented May 9, 2024 •

edited

Loading

melvin-bot bot commented May 9, 2024

melvin-bot bot commented May 9, 2024

bernhardoj commented May 10, 2024

melvin-bot bot commented May 29, 2024

melvin-bot bot commented May 29, 2024

melvin-bot bot commented May 29, 2024

DylanDylann commented Jun 5, 2024

puneetlath commented Jun 5, 2024

[HOLD for payment 2024-06-05] [$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key #41570

[HOLD for payment 2024-06-05] [$250] Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key #41570

Comments

izarutskaya commented May 3, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented May 3, 2024

izarutskaya commented May 3, 2024

Krishna2323 commented May 3, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

bernhardoj commented May 3, 2024

Proposal

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

What is the root cause of that problem?

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

melvin-bot bot commented May 3, 2024

melvin-bot bot commented May 3, 2024

dragnoir commented May 6, 2024

Proposal

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

What is the root cause of that problem?

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

Santhosh-Sellavel commented May 6, 2024

Santhosh-Sellavel commented May 6, 2024

DylanDylann commented May 6, 2024

melvin-bot bot commented May 6, 2024

puneetlath commented May 6, 2024

DylanDylann commented May 7, 2024 • edited Loading

dragnoir commented May 7, 2024 • edited Loading

dannymcclain commented May 7, 2024

DylanDylann commented May 9, 2024 • edited Loading

melvin-bot bot commented May 9, 2024

melvin-bot bot commented May 9, 2024

bernhardoj commented May 10, 2024

melvin-bot bot commented May 29, 2024

melvin-bot bot commented May 29, 2024

melvin-bot bot commented May 29, 2024

DylanDylann commented Jun 5, 2024

puneetlath commented Jun 5, 2024

izarutskaya commented May 3, 2024 •

edited by melvin-bot bot

Loading

DylanDylann commented May 7, 2024 •

edited

Loading

dragnoir commented May 7, 2024 •

edited

Loading

DylanDylann commented May 9, 2024 •

edited

Loading