FocusTrap should not scroll the page

[joshkel]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-3ufo5w-nfzjjw?file=Demo.tsx,index.tsx

Steps:

1. Click on the input element.
2. Press Tab to change the focus to the button (which is offscreen / outside the scroll area.)
3. Scroll back up, so the button is offscreen but still focused.
4. Press Space to trigger the button's click event.

Current behavior

The scroll area is scrolled to the button. Depending on browser and screen positioning, scrolling may occur both when the menu is shown and when it's closed.

Expected behavior

A popup or modal that temporarily traps the focus should be self-contained; it should not cause the containing page to scroll.

Context

I encountered this within a tree view's context menus. Focus for SimpleTreeView is (in my opinion) odd: a TreeItem's area within the DOM consists of that item plus all its descendants, so focusing the tree item causes the tree to jump around as the browser tries to make a massive item as focused as possible.

The FocusTrap behavior makes this more obvious / encountered more often, since popping up a context menu for the

See also #36508. If I understand correctly, that refers to behavior while the FocusTrap is active, while this refers to FocusTrap's restoration of focus on exit.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 127.0.6533.100
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react:  11.13.0
    @emotion/styled:  11.13.0
    @mui/base:  5.0.0-beta.41
    @mui/core-downloads-tracker:  5.16.7
    @mui/icons-material:  5.16.7
    @mui/lab:  5.0.0-alpha.173
    @mui/material:  5.16.7
    @mui/private-theming:  5.16.6
    @mui/styled-engine:  5.16.6
    @mui/system:  5.16.7
    @mui/types:  7.2.15
    @mui/utils:  5.16.6
    @mui/x-date-pickers:  7.12.1
    @mui/x-internals:  7.12.0
    @mui/x-tree-view:  7.12.1
    @types/react: ^18.3.3 => 18.3.3
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.5.4 => 5.5.4

Search keywords: FocusTrap

[michaldudak]

Hi! Sorry, but I fail to see how this should work in your opinion. When I'm focusing the Button in step 2 of your repro, the outer Box is correctly scrolled down. Do you expect the Box to be scrolled up again after opening the Menu?

[joshkel]

@michaldudak I apologize; my steps to reproduce were wrong. See the updated steps. If I focus the button, then scroll back up so that the button is offscreen when triggered, I expect the screen to not scroll.

This is more noticeable in my main project - there, I have a right-click context menu on a tree view, and the tree view scrolls when the menu is closed. I expect that not to happen. I tried putting together a test case demonstrating that specific issue but was unsuccessful.

[michaldudak]

Now it makes sense, thanks!