BUG: Dropdown injected in DOM at wrong location

[hassanasad]

Hi, After i updated ng2-bootstrap from 1.4 to 1.6.1, i started getting dropdown placement issues.

The dropdown was initially opening adjacent to the toggle (<a>More</a>) in the code below:

<ul class="menu">
	<li><a routerLink="/catalog" routerLinkActive="active" class="catalog">Catalog</a></li>
	<li><a routerLink="/proposals" routerLinkActive="active" class="proposals">Proposals</a></li>
	<li><a routerLink="/orders" routerLinkActive="active" class="orders">Orders</a></li>
    	<li class="dropdown more-menu" dropdown (click)="$event.preventDefault()">
		<a href dropdownToggle>More</a>
		<!--- THIS IS THE DROPDOWN --->
		<ul class="dropdown-menu" *dropdownMenu>
			<li ><a routerLink="/profile" routerLinkActive="active" >Profile</a></li>
			<li *ngIf="!authenticated"><a routerLink="/login" routerLinkActive="active">Login</a></li>
		</ul>
	</li>
</ul>

However after the update, now in DOM it appears one level up (adjacent to the <li dropdown>). This messes up the DOM structure. Am i missing an argument/setting or is this really a BUG?

[LUS1N]

I also have the same issue, the expanded dropdown is added as <bs-dropdown-container> outside of the <div dropdown>

[hassanasad]

Yup - its added at the same level as the 'dropdown' directive. I think its because of the new "Structural directive" (*dropdownMenu) introduced in 1.6.x but i might be wrong.

[hassanasad]

@valorkin Can you please look into this, it really messes up the layout :(

[valorkin]

It was the only way to enable append to body mode, move more-menu class to dropdown-menu class

[valorkin]

And update css accordingly

[e01010100]

Greetings,
I'm experiencing the same issue with my layout except by having the dropdownMenu injected at the same level as the element with the dropdown directive, instead of inside it, further breaks my build. I cannot use moveover and mouseout because those triggers are added to the element with the dropdown directive. When a user attempts to click on an item in the menu they are outside the element with the dropdown directive which triggers the mouseout function and closes the dropdown before they click it. The same problem occurs with the demo. To get around it, the demo only makes use of the mouseover; which causes a strange side effect of closing the dropdown menu when a user mouses away and then back (triggering mouseover twice).

If we can't have the dropdownMenu inside the dropdown directive with append to body mode, maybe there is a way we can split the component into two separate ones. Have many users experienced issues where the dropdown becomes hidden behind an element because it wasn't appended to the body?

[e01010100]

Additionally, this change breaks the routerLinkActive functionality rollup for dropdowns in nav-bars. Where if a link within the dropdown is active, the top level element would also be marked as active in the header.

[hassanasad]

@valorkin would it be possible to keep both methods (previous and new ones)? Users who need the body append mode use it that way and simple folks like us use the older method

[valorkin]

I have an idea, dropdown menu can work as ngIf