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][Dialog] Broken scrolling in fullScreen dialogs (v6) #43572

Closed
federico-ntr opened this issue Sep 2, 2024 · 6 comments · Fixed by #43626
Closed

[material-ui][Dialog] Broken scrolling in fullScreen dialogs (v6) #43572

federico-ntr opened this issue Sep 2, 2024 · 6 comments · Fixed by #43626
Assignees
Labels
bug 🐛 Something doesn't work component: dialog This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. package: material-ui Specific to @mui/material regression A bug, but worse v6.x

Comments

@federico-ntr
Copy link

federico-ntr commented Sep 2, 2024

Steps to reproduce

Link to live example: https://codesandbox.io/s/wizardly-swirles-yw2t4t?file=/src/Demo.js
Steps:

  1. Open repro
  2. Adjust the number of list items in the dialog if you don't have enough items to fill the height of the dialog
  3. Try to scroll

PS: repro is actually the example from the docs with more list items quickly copy-pasted to overflow the screen vertically

Current behavior

Scrolling doesn't work unless you manually target the element and add scrolling through CSS

Expected behavior

Scrolling should work with no additional steps, or at least there should be a sort of statement in the docs.

Context

This is one of the actually few things that broke while upgrading to v6.

Your environment

npx @mui/envinfo
  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.6.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.113
    Edge: 128.0.2739.54
    Safari: 17.6
  npmPackages:
    @emotion/react: 11.13.3 => 11.13.3 
    @emotion/styled: 11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  6.0.1 
    @mui/icons-material: 6.0.1 => 6.0.1 
    @mui/lab: 5.0.0-alpha.173 => 5.0.0-alpha.173 
    @mui/material: 6.0.1 => 6.0.1 
    @mui/private-theming:  5.16.5 
    @mui/styled-engine:  5.16.4 
    @mui/system: 6.0.1 => 6.0.1 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.5 
    @mui/x-data-grid: 7.15.0 => 7.15.0 
    @mui/x-date-pickers: 7.15.0 => 7.15.0 
    @mui/x-internals:  7.15.0 
    @types/react: 18.3.5 => 18.3.5 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: 5.5.4 => 5.5.4 ```
</details>


**Search keywords**: broken scrolling fullscreen dialog
@federico-ntr federico-ntr added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 2, 2024
@zannager zannager added the component: dialog This is the name of the generic UI component, not the React module! label Sep 2, 2024
@DiegoAndai DiegoAndai moved this to Backlog in Material UI Sep 4, 2024
@DiegoAndai DiegoAndai moved this from Backlog to Selected in Material UI Sep 5, 2024
@ZeeshanTamboli
Copy link
Member

It's a regression from #42283 where we removed overflowY: 'auto' from the Dialog's paper component (see #42283 (comment)). Adding it back fixes the issue.

@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. package: material-ui Specific to @mui/material regression A bug, but worse v6.x and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 5, 2024
@LuseBiswas
Copy link
Contributor

Hello @ZeeshanTamboli I think I had fixed the issue of it. Can you please assing this issue to me.

@DiegoAndai DiegoAndai self-assigned this Sep 5, 2024
@DiegoAndai DiegoAndai moved this from Selected to In progress in Material UI Sep 5, 2024
@DiegoAndai
Copy link
Member

@LuseBiswas thanks for reaching out, if you want please open a PR with the fix and add me as a reviewer, otherwise I'll open a PR tomorrow.

@LuseBiswas
Copy link
Contributor

@DiegoAndai kindly review my code.
Actually I am new to Open Source Contribution so I dont know how add a reviewer. So I am doing it mannualy.

Copy link

github-actions bot commented Sep 7, 2024

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @federico-ntr! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

@oliviertassinari
Copy link
Member

@ZeeshanTamboli #43572 (comment) nice hunting this down 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: dialog This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. package: material-ui Specific to @mui/material regression A bug, but worse v6.x
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

7 participants