ngbDropdown closes when scrollbars are used

[kaiza]

Bug description:

If you have an ngbDropdownMenu with a scrollbar and you click on the scrollbar or drag it, the dropdown closes.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-khpeym

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.2.5

ng-bootstrap: 4.0.4 but also tried 4.1.0

Bootstrap: 4.3.1

[maxokorokov]

Hey, @kaiza, as a workaround I'd suggest for this case you use autoClose="outside" and close the dropdown manually when clicking on items, ex. like in this stackblitz → https://stackblitz.com/edit/angular-b9hnfu?file=app/dropdown-form.html

Needs investigation though, in bootstrap it closes when you click in .dropdown-menu, but doesn't when you click on scrollbar indeed.

[kaiza]

Thanks @maxokorokov - I already figured out that workaround but the default behaviour definitely doesn't seem right.

[alignsoft]

Is there a nightly version of the library, or a timeframe for the 4.1.3 release? We're finding this to be a surprisingly severe pain point (users fixate on these things far too much), and I'm looking forward to closing this out in our bug list. Thanks!

[maxokorokov]

@alignsoft just released, many holidays in May. Let us know if anything is still not working!

[alignsoft]

Fixed - thanks for the swift response - very much appreciated!

[hinalshah91]

I am facing the same issue. I am using "@ng-bootstrap/ng-bootstrap": "^5.1.1", "Angular version": "8.2.8". I tried using autoClose="outside", but the dropdown doesn't close after selection. We need to manually close it.

[maxokorokov]

@hinalshah91 the use case in question works fine with Angular 8.1 and ng-bootstrap 5.1.1 → ex. https://stackblitz.com/edit/angular-khpeym-wepb7j?file=app/app.component.ts

Commenting on closed issues is usually not helpful, I've seen this one by change. Open a new one with the minimal reproduction scenario if you have any issues.