switching nav scrolls to the top of the page

[jnizet]

In a page where there is some text at the top, not filing the whole viewport height, and a nav at the bottom, large enough for the page to scroll, if you scroll down, then switch to another tab, the browser scrolls back to the top of the page.
This happens with or without animation, and with or without destroyOnHide.

Bug description:

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-hyx6po?file=src%2Findex.html

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 10 / 11

ng-bootstrap: 8.0.0

Bootstrap: 4.5.3

[maxokorokov]

Indeed. Looks like for a brief period of time between fade out and fade in the outlet stays empty.

I suspect (just a guess) something is wrong around this ngIf:

ng-bootstrap/src/nav/nav-outlet.ts

Lines 46 to 48 in 1f466ed

	<ng-template ngFor let-item [ngForOf]="nav.items">
	<div ngbNavPane *ngIf="item.isPanelInDom() || isPanelTransitioning(item)" [item]="item" [nav]="nav" [role]="paneRole">
	<ng-template [ngTemplateOutlet]="item.contentTpl?.templateRef || null"

and maybe this reflow:

ng-bootstrap/src/nav/nav-transition.ts

Lines 9 to 13 in 1f466ed

	export const ngbNavFadeInTransition: NgbTransitionStartFn = (element: HTMLElement) => {
	element.classList.add('active');
	reflow(element);
	element.classList.add('show');
	};

Need to investigate further
cc @fbasso

[jnizet]

Thanks for the fix @maxokorokov ❤️