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.

Sign up for GitHub

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

Jump to bottom

[accordion] When large content is present in accordion. The active accordion is going out of viewport #34379

Open
1 task done
vineeth-ktp opened this issue Sep 19, 2022 · 6 comments · May be fixed by #44002
Open
1 task done

[accordion] When large content is present in accordion. The active accordion is going out of viewport #34379

vineeth-ktp opened this issue Sep 19, 2022 · 6 comments · May be fixed by #44002
Labels
component: accordion This is the name of the generic UI component, not the React module! new feature New feature or request ready to take Help wanted. Guidance available. There is a high chance the change will be accepted waiting for 👍 Waiting for upvotes

Comments

@vineeth-ktp
Copy link

vineeth-ktp commented Sep 19, 2022 •
edited
Loading

Duplicates

Possible solution is suggested for V1 but nothing is there in V5
#12568

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Steps:

  1. When large content is present in Accordion, the content is going out of viewport.
  2. Example link - https://codesandbox.io/s/distracted-sanne-rre74j?file=/demo.js
  3. Click on the first item to expand the accordion
  4. Now scroll to bottom and click on the 2nd to expand.
  5. Notice how the screen is not taken to the top of the accordion but stays at the bottom

Current behavior 😯

Screen stays at end of the expanded accordion

Expected behavior 🤔

Focus should be on top of the content on the expanded section

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo 
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
@vineeth-ktp vineeth-ktp added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 19, 2022
@siriwatknp
Copy link
Member

siriwatknp commented Sep 20, 2022 •
edited
Loading

Is the workaround in #12568 do not work in v5?

@siriwatknp siriwatknp added status: waiting for author Issue with insufficient information component: accordion This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 20, 2022
@anjan-kp
Copy link

It works but why only a workaround from v1 to v5? I thought this must have a fix in V5 as this issue is definitely a drawback of MUI accordion and must be affecting users across all devices.

@siriwatknp siriwatknp added new feature New feature or request waiting for 👍 Waiting for upvotes and removed status: waiting for author Issue with insufficient information labels Sep 21, 2022
@siriwatknp
Copy link
Member

It works but why only a workaround from v1 to v5? I thought this must have a fix in V5 as this issue is definitely a drawback of MUI accordion and must be affecting users across all devices.

Fair enough, it brings better UX for sure. I mark this as a new feature and wait for votes. If anyone would like to work on this, please propose the solution in the comment before submitting a PR.

@rishav001own
Copy link

Is there any fix regarding this issue?

@ZeeshanTamboli ZeeshanTamboli mentioned this issue Sep 8, 2024
Closed
@oliviertassinari oliviertassinari changed the title [Accordion] - When large content is present in accordion. The active accordion is going out of viewport. [Accordion] When large content is present in accordion. The active accordion is going out of viewport Oct 3, 2024
@DiegoAndai DiegoAndai added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Oct 4, 2024
@yash49
Copy link
Contributor

yash49 commented Oct 5, 2024

Hi maintainers
I'd like to work on this issue

@yash49 yash49 linked a pull request Oct 6, 2024 that will close this issue
Open
@yash49
Copy link
Contributor

yash49 commented Oct 6, 2024

#44002 here is my proposal

@oliviertassinari oliviertassinari changed the title [Accordion] When large content is present in accordion. The active accordion is going out of viewport [accordion] When large content is present in accordion. The active accordion is going out of viewport Oct 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: accordion This is the name of the generic UI component, not the React module! new feature New feature or request ready to take Help wanted. Guidance available. There is a high chance the change will be accepted waiting for 👍 Waiting for upvotes
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[accordion] Keep active Accordion in viewport yash49/material-ui
6 participants
@DiegoAndai @siriwatknp @yash49 @rishav001own @anjan-kp @vineeth-ktp