FocusTrap should not scroll the page

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

  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

Start by reproducing the behavior in the linked StackBlitz example, using Demo.tsx and index.tsx, then inspect FocusTrap's focus restoration behavior and compare it with #36508. Done means opening and closing the popup or modal no longer scrolls the containing page while focus is restored correctly.