[TreeView] Jumpy focus when content higher than the browser content's height

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I’m facing an issue with TreeView and TreeItem, it happened when the TreeView are expanded larger than the browser height. For certain TreeItem, it requires 2 click to expand/collapse the row. But certain will not expand, and keep on jumping out of focus, and you need to place the section at certain area to be able to expand it.

This seems to be the same as #24096 however it still happened in my case.

Currently, I’ve patched the TreeItem.js to stop the handleFocus from running anything within. I don’t think I need the focus anyway so that’s the workaround, as there’re no way to overwrite the TreeItem’s onFocus for now.

Expected behavior 🤔

I expect it to not jump to the top of the page, and just expand the TreeItem

Steps to reproduce 🕹

Steps: I’ve created a sandbox replicating this issue at the link below.

1. https://codesandbox.io/s/withered-sun-ph8hb
2. Tap the section to expand, and keep opening the children section
3. Monitor the outcome

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 11.6
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 3.0.1 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Edge: 97.0.1072.62
    Firefox: Not Found
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.65 
    @mui/icons-material: ^5.2.5 => 5.3.0 
    @mui/lab: ^5.0.0-alpha.68 => 5.0.0-alpha.68 
    @mui/material: ^5.2.5 => 5.3.0 
    @mui/private-theming:  5.3.0 
    @mui/styled-engine:  5.4.1 
    @mui/styles: ^5.2.3 => 5.3.0 
    @mui/system:  5.4.1 
    @mui/types:  7.1.0 
    @mui/utils:  5.3.0 
    @mui/x-data-grid: ^5.2.1 => 5.2.2 
    @mui/x-data-grid-generator: ^5.2.1 => 5.2.2 
    @mui/x-data-grid-pro: ^5.2.1 => 5.2.2 
    @mui/x-license-pro:  5.2.2 
    @types/react: ^17.0.37 => 17.0.38 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components:  5.3.3 
    typescript: ^4.4.3 => 4.5.3 

[idrakimuhamad]

@idrakimuhamad so if we understand it correctly, your bug report is for Safari v14.1.2?

Yes, for the 2 browsers I have, only happened in Safari.

[eladkariti]

Yeap, we fixed #24096 with an API that is not supported by Safari, so we didn’t solve the problem in reality. https://caniuse.com/mdn-api_htmlelement_focus_options_preventscroll_parameter

A different bug that I have just noticed, when using the Arrow keys to move the focus, the page doesn’t scroll. We might want to revert #21695.

Hi @oliviertassinari, I get the same unexpected behavior regarding the Arrows keys that doesn’t scroll the component.

is it a know issue?

thanks