Material-ui: [Accordion] Opening second panel scrolls all content off screen

[salientknight]

I have 7 panels with a lot of content in each -- on page load all panels open properly. Once I open a second pane, however, the content scrolls up and off screen -- leaving me below the entire set of panels -- with the second panel open.

• [ X] This is a v1.x issue.
• [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

screne focus should be on top of newly opened pannel

Current Behavior

focus is not at top of newly opened panel - and is quite far down the page

Steps to Reproduce

https://codesandbox.io/s/lxkw18mk2q

I've done my best to explain what's wrong in this sample page.
It seems like when a panel is opened then a panel below it is open, it opens the new panel before closing the first panel, so when the first panel is closed, everything scrolls up by the hight of the panel that was opened first -- leaving focus far below the top of the newly opened panel. If the panel opened first is below the new panel being open, the behavior works as expected.

Link:

1.https://codesandbox.io/s/lxkw18mk2q
2.
3.
4.

Context

Trying to accomplish a single page with 7 panels of content each in turn hidden with the other is open -- this is the last issues left to be addressed

Your Environment

The problem was easily reproduced in codesanebox.io

| Tech | Version |
|--------------|---------|
| Material-UI | v1.5.0 |
| React | v16.4.2 |
| browser | any |
| etc. | windows/mac |

[oliviertassinari]

@salientknight I'm not sure to understand, how would you expect the expansion panel to support contents that long? I don't see how it could work in the first place. I would discourage you to use it this way, or I'm missing something?

[salientknight]

I don't entirely disagree with you -- however, it should still snap to the top of the opened container -- I have to build a functional module so I can prove it's not a good approach. :)

[salientknight]

I'm not entirely sure what information you are waiting for? What I need to hide in the expansions is roughly a full page of related information (a list) that needs to be accessible but not on the screen all at once. I originally built this as Tabs but the designer wants Accordions. The problem isn's that the accordion behavior is broken is that's the close behavior doesn't seem to be happening in the proper sequence. If the first open container closed first, the content of the second container should stay on the screen.

Honestly, I can't imagine this being very useful without a few paragraphs of information in them. I definitely exaggerated in the sample to make sure the effect was noticed. On a cell phone for example where there isn't much height at all, this is going to be a problem pretty quickly even without a lot of content.

Basically, however, it's being used no one opens an accordion to see what's in the middle or at the bottom of it. Accordions are used all over our site, and as I replace it with a new front, I'm hoping the behavior functions more like I would expect it to.

[oliviertassinari]

The problem isn's that the accordion behavior is broken is that's the close behavior doesn't seem to be happening in the proper sequence. If the first open container closed first, the content of the second container should stay on the screen.

@salientknight I see your point. It's exactly what I was looking for.
So instead of opening and closing two different panels at the same time. We can do one after the other.
It's something the current API allows you to do. Close the current panel, wait for the transition to complete, open the next panel. The component is stateless it's user responsibility to implement the control logic they seek.
The current transition logic documented is optimized for small to medium height content. It's what most people will be using the component for, but again, it's in userland, you can do whatever you want.

[salientknight]

Awesome thank you :)

[salientknight]

I jumped the gun a bit. The code you linked me to is exactly what I am using. The problem isn't that more than one is open at a time. The problem seems to be the order they are opening and closing in. When the first open panel closes, everything slides up by the height of the panel, pulling what should be the active content off-screen. Looking at the code demo I linked to, the header tags where it says "focus should be here" or something like that should be in the visual range on the page, but it's not. Is there something in the link you send that I'm missing? B/C otherwise we've just come full circle back to the problem I'm reporting :)

[oliviertassinari]

@salientknight I haven't linked you any solution. I was giving you guidance on how to fix the problem:

Close the current panel, wait for the transition to complete, open the next panel.

[salientknight]

Thank you for the help :) I found a workable solution. I'll drop it here for the next person trying misuse this code ;)

     handleChange = panel => (event, expanded) => {
        this.setState({
            expanded: expanded ? panel : false,

        });
        window.scrollTo(0, expanded.offsetTop-100); //moves the newly opened panel up offeset by 
    100px
    };