Skip to content

Destorying modal is slow due to scrollbar reset #1831

@Remo

Description

@Remo

I've got a component with quite a few nested components. It's some kind of a form builder and one form contains a lot of elements and each elements as well as each row has a few options. Those options I'm hiding by default by using a bootstrap-vue modal component.

That works well and reasonably fast, but when I unload the page, things get insanely slow.
The problem starts in resetScrollbar which is called a lot and eventually causes querySelectorAll to consume a lot of CPU time. You can see it in the profile below:

image

Is there some way to get around that? Would it be possible to manually call that method if required and disable it by default? I know that I can customize the component and add a switch, but I'm looking for a solution that doesn't require me overriding code which won't get updated in the future. I'm also wondering if it wouldn't be enough to reset the scrollbar if we close one modal instead of doing so when it gets destroyed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions