Dropdown in navbar issue on IOS Safari

[smokerbag]

Bug description:

On IOS Safari if you have a dropdown menu inside of a navbar and you tap on an item in the expanded dropdown the dropdown will collapse and the the next menu will expand. I first noticed this in a project after we upgraded to Angular 8 and the latest version of ng-bootstrap. I have a dropdown menu with router links inside my navbar and tapping on one just collapses the menu opening up the next one in line. All of the 5.x.x and 4.x.x versions exhibit this issue. When I downgraded to 3.3.1 it worked as expected.

All desktop browsers I have tried work fine.

Link to minimally-working StackBlitz that reproduces the issue:

1. Go to https://ng-bootstrap.github.io/#/components/dropdown/examples#navbar in Safari on IOS.
2. Expand the navbar
3. Expand Static
4. Tap Action
5. You will see that Static Right is expanded

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 8.2.3

ng-bootstrap: 5.1.0

Bootstrap: 4.3.1

[maxokorokov]

Actually reproducible in any demos with dropdown where dropdown popup is opened on top of something. Suspect its related to custom autoclose behaviour implementation for iOS.

[maxokorokov]

Just to confirm are you using Safari 13 ?

[aemchuk]

Hello. I am experiencing the same kind of issue and wondering if there is a workaround for versions: angular: 7.2.15 and ng-bootstrap: 4.2.1? It might be to expensive for us to migrate our app at the moment. Thanks for help.

[TimonKK]

Hello. I am experiencing the same kind of issue and wondering if there is a workaround for versions: angular: 7.2.15 and ng-bootstrap: 4.2.1? It might be to expensive for us to migrate our app at the moment. Thanks for help.

You can remove from your project ngbDropdown, ngbDropdownToggle, ngbDropdownMenu and etc directives. And add dropdown.js from bootstraps package into angular.json
But isn't recommend in ng-bootstrap, read more here

[aemchuk]

@TimonKK Thank you for hint. I'll try it out.