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

[Bug Report] expension panels open laggy #10140

Closed
ricardovanlaarhoven opened this issue Jan 7, 2020 · 8 comments
Closed

[Bug Report] expension panels open laggy #10140

ricardovanlaarhoven opened this issue Jan 7, 2020 · 8 comments
Assignees
Labels
C: VExpansionPanels VExpansionPanels has workaround T: bug Functionality that does not work as intended/expected
Milestone

Comments

@ricardovanlaarhoven
Copy link
Contributor

Environment

Vuetify Version: 2.2.1
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.88
OS: Windows 10

Steps to reproduce

In the codepen click on the blue blocks to open the next expansion panel

Expected Behavior

open fluently

Actual Behavior

it opens laggy, perhaps because the v-for is still rendering

Reproduction Link

https://codepen.io/ricardovanlaarhoven/pen/WNbwvev

Other comments

perhaps the expension panel is just missing an eager prop?

@ghost ghost added the S: triage label Jan 7, 2020
@YipingRuan YipingRuan added C: VExpansionPanels VExpansionPanels performance The issue involves performance labels Jan 8, 2020
@YipingRuan
Copy link
Contributor

FPS remains high at 60, maybe the animation curve need to be adjust?
panel

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected and removed performance The issue involves performance S: triage labels Jan 8, 2020
@KaelWD
Copy link
Member

KaelWD commented Jan 8, 2020

Not performance or animation related, it opens fine if eager or the header is clicked on.

@ricardovanlaarhoven
Copy link
Contributor Author

How could i make it eager?

perhaps the expension panel is just missing an eager prop?

Does the eager option exist? is it just undocumented?

@MajesticPotatoe
Copy link
Member

123123

@ricardovanlaarhoven
Copy link
Contributor Author

ah sorry! you are right!
I did check the expansion panels and the expansion panel component but not the content..

thanks!

@arxanas
Copy link
Contributor

arxanas commented Mar 30, 2020

The issue happens whenever you control the panel content externally. It reproduces in this example in the docs as well: https://vuetifyjs.com/en/components/expansion-panels/#external-control

It's very strange that the user clicking a panel to open it doesn't trigger the lag, but programmatically opening it does. I think this should be treated as a bug.

I also looked in the wrong place in the documentation. If not a bug, it should at least be addressed in the documentation, and the "external control" example should be updated to use eager and explain why it's necessary.

@alechewitt
Copy link

Just trying out Vuetify today and I've also noticed this behaviour. As @arxanas says, it only happens when you programmatically open the panel for the the first time. Setting eager to true on the v-expansion-panel-content prevents it happening.

@Gu3
Copy link

Gu3 commented Jun 2, 2021

Hi,
some trick to improve this behaviour is to add "accordion" option inside the expansion-panels tag
<v-expansion-panels v-model="panel" accordion>
That will be kill the space between two panels and the expansion will be less laggy...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VExpansionPanels VExpansionPanels has workaround T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests

7 participants