[HOLD for payment 2024-01-25] [$500] Workspace - Enter click does not trigger workspace remove members button

[kbecciv]

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: v1.4.11-6
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. Open the app
2. Open settings
3. Open workspaces
4. Open any workspace
5. Open Members
6. Select any existing user and click on remove
7. Click enter on popup, observe that it does nothing
8. Click enter again and observe that it cancels the remove

Expected Result:

App should trigger remove button in popup on enter click as we do throughout the app for similar buttons

Actual Result:

App does not trigger remove button in popup for remove members on click of enter

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

Bug6310160_1702370222507.windows_chrome_-_enter_click_remove_button_issue.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fd33a43f9c145685
• Upwork Job ID: 1736043912087367680
• Last Price Increase: 2024-01-13
• Automatic offers:
• shubham1206agra | Reviewer | 28103052
• ishpaul777 | Contributor | 28103053

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[ishpaul777]

Problem

Proposal

Workspace - Enter click does not trigger workspace remove members

Root Cause

When enter is triggered first time the sectionlist item is unselected because there is enter key listner still active on the page.

https://github.com/Expensify/App/blob/main/src/components/SelectionList/BaseSelectionList.js#L384

Changes

We have prop disableKeyboardShortcuts in SectionList, we just need to pass is true when modal is visible to enter key click is consumed by the button not the list item

[neonbhai]

Proposal

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

Enter click does not trigger workspace remove members button

What is the root cause of that problem?

This is because we don't disable the Keyboard Shortcut on BaseSelectionList when a modal is opened:

App/src/components/SelectionList/BaseSelectionList.js

Line 159 in 3ed43ff

const disableEnterShortcut = activeElement && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElement.role);

When a modal is opened the active element changes to modal view, and activeElement.role is null
but since we are missing a null check, the shortcut is not disabled/

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

We should update the line here:

App/src/components/SelectionList/BaseSelectionList.js

Line 159 in 3ed43ff

const disableEnterShortcut = activeElement && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElement.role);

to:

const disableEnterShortcut = activeElement && ( _.isNull(activeElement.role) || [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElement.role));

Result:

Screen.Recording.2023-12-16.at.9.27.42.PM.mov

[neonbhai]

Proposal

Updated

Added video demostrating result of code changes.

[FitseTLT]

Proposal

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

Enter click does not trigger workspace remove members button

What is the root cause of that problem?

The root cause of the problem is that pressing enter after the modal is open will be listened by the BaseSelectionList so it deselects the selected item instead of pressing the Remove button in the modal. Basically we have got a proper disabling enter key logic in here

App/src/components/SelectionList/BaseSelectionList.js

Lines 159 to 160 in 8bef4bb

	const disableEnterShortcut = activeElement && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElement.role);

which disables when the active element is checkbox or button and which is correct but in this case Remove button is not focused.

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

We should exploit the correct disabling enter shourtcut here

App/src/components/SelectionList/BaseSelectionList.js

Lines 159 to 160 in 8bef4bb

	const disableEnterShortcut = activeElement && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElement.role);

And we should focus on the remove button whenever the modal is rendered or focused (useEffect or useFocusEffect). These will solve similar problems where we use the confirm modal.
In ConfirmContent

const confirmButton = useRef(null);

    useEffect(() => {
        confirmButton.current?.focus();
    },[]);

What alternative solutions did you explore? (Optional)

In SelectionList we can create a new prop disableKeyboard and disable both arrow key and enter key shortcuts when the modal is open. So in WorkspaceMembersPage we can pass the prop depending on the state removeMembersConfirmModalVisible to disable keyboard on the SelectionList while the modal is open. I don't think it is proper that arrow keys are working for the list while the modal is open as it does now. We can also use this prop on other selection list instances where we want to disable the keyboard when modal is open.