Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Menu] disableScrollLock doesn't work for Select when wrapper's overflow hidden #42323

Open
erfoon opened this issue May 21, 2024 · 1 comment
Assignees
Labels
component: menu This is the name of the generic UI component, not the React module! component: select This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@erfoon
Copy link

erfoon commented May 21, 2024

Steps to reproduce

Link to live example: Sandbox example (Just click on the Select component)

Steps:

  1. Inside a component with overflow = hidden create a Select using Select and MenuItem components
  2. Make Select component scrollIntoView on focus
  3. Observe that Menus get away from the Select component although disableScrollLock should stop it

Current behavior

The MenuItems get away from the select
2024-05-22 01 22 28
I use overflow=hidden for the main parent component of my app, so there's nothing I can easily change

Expected behaviour

When disableScrollLock is true, MenuItems should always stick to the Select component, regardless of the style and properties of the parent components.

Context

No response

Your environment

I use Chrome Version 124, but same behaviour with Firefox and Safari

npx @mui/envinfo
  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.60
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react:  11.11.1 
    @emotion/styled:  11.11.0 
    @mui/base:  5.0.0-beta.32 
    @mui/core-downloads-tracker:  5.15.5 
    @mui/icons-material: ^5.15.5 => 5.15.5 
    @mui/lab: ^5.0.0-alpha.165 => 5.0.0-alpha.165 
    @mui/material: ^5.15.5 => 5.15.5 
    @mui/private-theming:  5.15.5 
    @mui/styled-engine:  5.15.5 
    @mui/system: ^5.15.5 => 5.15.5 
    @mui/types:  7.2.13 
    @mui/utils:  5.14.18 
    @mui/x-data-grid:  6.18.7 
    @mui/x-data-grid-premium: ^6.18.7 => 6.18.7 
    @mui/x-data-grid-pro:  6.18.7 
    @mui/x-date-pickers: ^6.19.0 => 6.19.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: ^18.0.5 => 18.2.33 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components:  5.3.11 
    typescript: ^5.4.5 => 5.4.5 

Search keywords: disableScrollLock

@erfoon erfoon added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 21, 2024
@zannager zannager added the component: select This is the name of the generic UI component, not the React module! label May 22, 2024
@Brian-Azizi
Copy link

@mj12albert @zannager what's the status of this? I'm running into the same issue

@danilo-leal danilo-leal changed the title disableScrollLock doesn't work for Select when wrapper's overflow=hidden [material-ui][Menu] disableScrollLock doesn't work for Select when wrapper's overflow hidden May 28, 2024
@danilo-leal danilo-leal added component: menu This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels May 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: menu This is the name of the generic UI component, not the React module! component: select This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

5 participants