[$500] Room - First workspace becomes highlighted by default when creating new room for 2nd time

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.24-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Click on FAB > New Chat > room > workspace
Observe no workspace is highlighted
Select the first workspace
Click outside of the panel to close it
Re do step 1

Expected Result:

No workspace should be highlighted by default

Actual Result:

The first workspace becomes highlighted

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6339358_1705005197988.workspaceRoomHighlighted.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01bc4717bf898902a4
Upwork Job ID: 1745546481285779456
Last Price Increase: 2024-02-01

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

@sophiepintoraetz

Triggered auto assignment to @sophiepintoraetz (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

@aimane-chnaif

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

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

In selection list, the focusedIndex is set as 0 even tho it should be -1

What is the root cause of that problem?

This happens because when sections change after first render of SelectionList, updateAndScrollToFocusedIndex is called.

It sets the index focused index to 0.

App/src/components/SelectionList/BaseSelectionList.js

Lines 375 to 377 in c080ccc

    
           if (sections.length > 0) { 
        
               updateAndScrollToFocusedIndex(0); 
        
           }

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

Change the dependency array of the useEffect to update only when its length changes [sections?.length]

App/src/components/SelectionList/BaseSelectionList.js

Line 379 in c080ccc

}, [sections]);

Proposal

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

Room - First workspace becomes highlighted by default when creating new room for 2nd time

What is the root cause of that problem?

We don't highlight the first option in the SelectionList because if we don't pass initiallyFocusedOptionKey no option will be focused because the fallback for focusedIndexis set to -1. Due to the updateAndScrollToFocusedIndex, the first option is highlighted sometimes.

App/src/components/SelectionList/BaseSelectionList.js

Lines 375 to 377 in c080ccc

    
           if (sections.length > 0) { 
        
               updateAndScrollToFocusedIndex(0); 
        
           }

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

In my opinion, we should set the fallback for focusedIndex to 0 because in almost every SelectionList components, the first option is always highlighted. I believe it is good for the user experience to indicate that it can also be changed through keyboard navigation.

We can just update this line:

App/src/components/SelectionList/BaseSelectionList.js

Line 157 in e0f0e40

    
           const [focusedIndex, setFocusedIndex] = useState(() => _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey));

To:

    const [focusedIndex, setFocusedIndex] = useState(() => {
        const initialIndex = _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey);
        return initialIndex !== -1 ? initialIndex : 0;
    });

Result:

focus_index_selectionList.mp4

Optional:

We can pass initiallyFocusedOptionKey if we don't want to change the fallback for focusedIndex. We will use the first item key in the options form initiallyFocusedOptionKey.
We can introduce a new prop inside BaseSelectionList to highlight the first option only if the prop is true. We will set the fallback property based on that.

I think we should hold for #29080

@aimane-chnaif

@aimane-chnaif - Should this be open to proposals externally? Is the original bug still happening?

Observe no workspace is highlighted

This step is failing. First workspace is always highlighted

Expected Result:
No workspace should be highlighted by default

Actual Result:
The first workspace becomes highlighted

Should this be inverted?

Discussing here - https://expensify.slack.com/archives/C01GTK53T8Q/p1710877793579389

I am going to be OOO soon. Please assign new C+.

@lschurr

@lschurr I'm a new C+ so I'm low on issues, I can take over 👍

@lanitochka17

Based on the Slack thread, I think we're going to ask QA to test again. @lanitochka17 can you confirm this bug is still reproducible?

Asking for help from QA: https://expensify.slack.com/archives/C9YU7BX5M/p1711381040209419

@ishpaul777

@ishpaul777 bug is not rproducible

bandicam.2024-03-25.18-47-35-654.mp4

Closing since we're unable to reproduce.

Navigation Menu

Repository navigation

[$500] Room - First workspace becomes highlighted by default when creating new room for 2nd time #34393

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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?

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?

Result:

Optional:

68 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (sections.length > 0) {
	updateAndScrollToFocusedIndex(0);
	}

[$500] Room - First workspace becomes highlighted by default when creating new room for 2nd time #34393

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 11, 2024

melvin-bot commented on Jan 11, 2024

melvin-bot commented on Jan 11, 2024

rushatgabhane commented on Jan 11, 2024

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?

Krishna2323 commented on Jan 11, 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?

Result:

Optional:

DylanDylann commented on Jan 12, 2024

68 remaining items

lschurr commented on Mar 19, 2024

aimane-chnaif commented on Mar 19, 2024

aimane-chnaif commented on Mar 19, 2024

lschurr commented on Mar 19, 2024

aimane-chnaif commented on Mar 20, 2024

dukenv0307 commented on Mar 20, 2024

lschurr commented on Mar 20, 2024

lschurr commented on Mar 25, 2024

kavimuru commented on Mar 25, 2024

lschurr commented on Mar 25, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions