Ngx-bootstrap: fix(dropdown): performance problems with multiple dropdowns

[dklmuc]

Description

We see a big performance problem when using a high number of Dropdowns (e.g. a list of 100 or more elements, each with his own action dropdown). Especially in dev mode the app is getting unresponsible to clicks for seconds.

Workaround

Render the dropdown element on mouseenter (simple *ngIf).

Notes
Because of the workaround, I think the problem is the high number of global listeners (for closing the dropdown with an outside click). The guys from ng-bootstrap had an similar problem and solved it by register the listeners only when opening a dropdown and remove them on closing.
See https://github.com/ng-bootstrap/ng-bootstrap/issues/900 for the issue or https://github.com/thbt/ng-bootstrap/commit/65778f33871f838341845d7e30d09a43f218ba13 for the fix.

[valorkin]

it does makes sense, thanks

[RolfVeinoeSorensen]

I have the same problem. This would be very cool to get fixed soon. Register listeners only when the dropdown is opened seems to be a good fix.

@dklmuc could you share an example of the workaround you made?

[dklmuc]

It's just a simple mouseenter/mouseleave on the surrounding element:

<div (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
    <!-- dropdown -->
    <div class="button-group float-right dropdown" dropdown *ngIf="showDropdown">
        <button type="button" class="btn btn-link btn-sm dropdown-toggle" dropdownToggle></button>
        <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
            ...
        </div>
    </div>
</div>

So the dropdown directive (and therefor the global listeners) for each element is only created when needed and gets destroyed after usage. But we also hope for a quick fix.

[JoaoSaleiro]

We have this issue in a production webapp. Many dropdowns makes the page very slow. Is there an official solution ?

[cyborgdoom]

Yeah I'm getting this issue also... When having a table that uses NgFor to display a list with pagination showing 100 items, the dropdown causes the page to be very sluggish ... where it takes at lease 5 seconds for the drop down to show... When changing the pagination size to below 100 like say 50 it improves .. 15 items per page performs fine...

[rigoleto]

We also ran into this issue as recently as this week (tested with 2.0.0-rc.0). In our case the mouseenter workaround doesn't apply since we rely on this in mobile views.

[valorkin]

I know how to fix it, but will have finish with datepicker first

[sanyooh]

can you give a suggestion when this will be fixed? our Angular update is blocked by this issue and are currently waiting since 3 months for this.

or maybe can somebody suggest an alternative which is similar to this dropdown component?

[Zak-C]

Are there any updates on this issue?

[gem85247]

any updates?

[pmramos]

Any updates on this?

[timmyg]

I ended up implementing dropdowns the old fashioned way (not using ngx-bootstrap) and performance was 5x better...

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

[valorkin]

@timmyg I believe with IvyRenderer and some updates in ngx-bootstrap we will get to 1x or even faster ;)

[bhaskerchari]

@valorkin ,

What's stopping you for fixing this issue? It's been almost a year by now since the issue has been opened and this is a serious performance issue which needs to be addressed and it really makes it unusable and very sluggish when # of dropdown goes just beyond 50.

It looks like there is no proper fix that is available with you which is stopping from closing this.

[valorkin]

Time is so fast :(

[lazaro3487]

Any news related with that issue?

[jason2211]

Any updates on the PR getting approved?

[kernyden]

i have the same issue with datepicker, is there any solution for this

[ghost]

Can you please update us on this, there are a lot of people that have been or are building solutions using your implementation, but the delay in fixing essential issues like this is making us have to invest time and money moving to another library. Can you at least just tell us all of you are going to progress any further fixes or developments as 1 Year 9 months is a long time........

[dklmuc]

problem is PR #4605 was ignored and #5099 only removes Clicklistener and still adding a global listener for ESC.

[Domainv]

@brisk-greg @dklmuc

4605 will be preferred. Will be added to release in next 2 weeks

[kernyden]

@Domainv will it touch datepickers?

[Domainv]

no