[Due for payment 2025-03-05] [$250] WS - "Space Bar" lets you scroll down WS list when the 3 dot menu is open

[IuliiaHerets]

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: v9.0.90-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Macbook Pro 2023 / Sequioa 15.2
App Component: Workspace Settings

Action Performed:

Precond: User has a long list of Workspaces

1. Access staging.new.expensify.com
2. Sign into a valid account
3. Go to Settings > Workspace (WS) > Tap on 3 dot menu on a WS
4. With the popup open, tap on "Space Bar" on keyboard

Expected Result:

User expects the list to stay put (If you try to scroll down with the popup menu open, you can NOT do this)

Actual Result:

If you click "Space Bar" the screen starts scrolling downwards and the 3 dot menu stays open and the WS for which it is associated, gets scrolled off the screen

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6725724_1738036605727.Space_bar_scrolls_WS_list.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021884364605897544895
• Upwork Job ID: 1884364605897544895
• Last Price Increase: 2025-01-28
• Automatic offers:
• DylanDylann | Reviewer | 105976309
• linhvovan29546 | Contributor | 105976312

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-28 14:05:18 UTC.

Proposal

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

WS - "Space Bar" lets you scroll down WS list when the 3 dot menu is open

What is the root cause of that problem?

This issue arises from default web behavior. When a user clicks(interacted) on content within a scrollable view, the browser allows scrolling via the keyboard.

Here is a Stack Overflow answer https://stackoverflow.com/a/77580408 that mentions this browser behavior.

This means users can scroll via the Up/Down keys as well. However, since we use useArrowKeyFocusManager in the PopoverMenu to override the keys, the issue does not occur with the Up/Down keys and only happens with the Space key

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

We can prevent this behavior when the three-dot menu is open by using preventDefault for the Space key in PopoverMenu.tsx:

    const handleKeyDown = (e) => {
        if (e.code == 'Space') {
            e.preventDefault();
            return false;
        }
    }
    useEffect(() => {

        KeyDownListener.addKeyDownPressListener(handleKeyDown);
        return () => {
            KeyDownListener.removeKeyDownPressListener(handleKeyDown);
        };
    }, [isVisible]);

We need to apply a fix for other pages as well

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

An alternative solution is to customize useKeyboardShortcut to support the new SPACE key event to prevent scroll

1. Create SPACE const
   

   App/src/CONST.ts

   Lines 869 to 873 in 19cac4f

   	BACKSPACE: {
   	descriptionKey: null,
   	shortcutKey: 'Backspace',
   	modifiers: [],
   	},

...
        SPACE: {
            descriptionKey: null,
            shortcutKey: 'Space',
            modifiers: [],
            trigger: {
                DEFAULT: { input: ' ' },
            }
        }

2. Then we need to modify getDisplayName function to support key SPACE
   

   App/src/libs/KeyboardShortcut/index.ts

   Lines 67 to 69 in 19cac4f

   	if (key.toLowerCase() === keyInputRightArrow.toLowerCase()) {
   	return ['ARROWRIGHT'];
   	}

const keySpace = ' '
...
        if (key === keySpace) {
            return ['SPACE'];
        }

3. Add below code to PopoverMenu

...
    useKeyboardShortcut(
        CONST.KEYBOARD_SHORTCUTS.SPACE,
        () => {
        },
        { isActive: isVisible},
    );

And for the issue in other places, such as in SectionList(For example, when the RHN is open), we can disable scrolling when the screen is not focused instead prevent the space key

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 791 to 793 in e94df0f

	<SectionList
	removeClippedSubviews={removeClippedSubviews}
	ref={listRef}

scrollEnabled={isFocused}

Details of this alternative solutions can be discussed during the PR phase
TEST BRANCH

[melvin-bot]

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

[melvin-bot]

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

[dangrous]

I can take a look at this once it's ready for an internal engineer!

[vaibhavkumar-WPDEV]

Hi.
when click on three dots. just add the overflow hidden into body or the div which is scrolling in css.

The issue is that pressing the space bar causes the entire page to scroll while the three-dot menu is open. This likely happens because the browser interprets the space bar as a default scroll action.

Steps to Fix:

1. Prevent Default Scrolling Behavior
   When the menu is open, prevent the default space bar scrolling behavior using event.preventDefault().
2. Detect When the Menu is Open
   Ensure that event listeners check if the three-dot menu is open before preventing the scroll.
3. Apply a Global Event Listener
   Use keydown event listener on document to capture the space bar press.

Solution (JavaScript/React)
Modify the component where the three-dot menu is implemented.

import { useEffect } from "react";

const usePreventSpaceBarScroll = (menuOpen) => {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (menuOpen && event.code === "Space") {
        event.preventDefault(); // Prevents page scrolling
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [menuOpen]);
};

export default usePreventSpaceBarScroll;

Usage in Menu Component:

import usePreventSpaceBarScroll from "./usePreventSpaceBarScroll";

const MenuComponent = ({ isOpen }) => {
  usePreventSpaceBarScroll(isOpen);

  return (
    <div className={`menu ${isOpen ? "open" : ""}`}>
      {/* Menu Content */}
    </div>
  );
};

Alternative Fix (CSS - Optional)
You can also disable scrolling when the menu is open by modifying the body:

body.menu-open {
  overflow: hidden;
}

Then, add/remove this class dynamically when the menu opens/closes.

Thanks!

[melvin-bot]

📣 @vaibhavkumar-WPDEV! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>