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

[lanitochka17]

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:

1. Click on FAB > New Chat > room > workspace
2. Observe no workspace is highlighted
3. Select the first workspace
4. Click outside of the panel to close it
5. 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?

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

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[rushatgabhane]

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]);

[Krishna2323]

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:

1. 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.
2. 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.

[DylanDylann]

I think we should hold for #29080

[sophiepintoraetz]

@aimane-chnaif - do you agree?

[aimane-chnaif]

Agree to hold

[aimane-chnaif]

Keep watching progress in #34196

[melvin-bot]

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

[aimane-chnaif]

Same

[sophiepintoraetz]

No update here - linked holding PR is still in review.

[melvin-bot]

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

[lschurr]

@aimane-chnaif - Can you please provide an update on this one?

[aimane-chnaif]

Please update proposals based on latest main. BaseSelectionList was refactored much after issue created.

[lschurr]

So we're waiting on proposals, is that right @aimane-chnaif?

[lschurr]

Still waiting on proposals.

[lschurr]

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

[aimane-chnaif]

2. Observe no workspace is highlighted

This step is failing. First workspace is always highlighted

[aimane-chnaif]

Expected Result:
No workspace should be highlighted by default

Actual Result:
The first workspace becomes highlighted

Should this be inverted?

[lschurr]

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

[aimane-chnaif]

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

[dukenv0307]

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

[lschurr]

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?

[lschurr]

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

[kavimuru]

@ishpaul777 bug is not rproducible

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

[lschurr]

Closing since we're unable to reproduce.