NGX-Bootstrap v5.6.1 Dropdown Menu append to body not aligning with the dropdown trigger element

[garishsamuel]

Bug description:

When using [container]="body" for the Dropdown component the dropdown panel is not aligned properly with the parent(trigger) element.

Plunker/StackBlitz that reproduces the issue:

This issue is easily replicated in the ngx-bootstrap demo site.

https://valor-software.com/ngx-bootstrap/#/dropdowns

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 5.6.1

Angular: 9.1.4

Bootstrap: 3.4.1

Expected behavior

The dropdown panel should be aligned inline with the parent(trigger) element.

[branko-boston]

This was working correctly in v5.5.0, and broken in v5.6.0

[szymon-baranczyk]

Yep, this issue blocked my update of Angular.

[0xphilipp]

Any plan, when this will be fixed?

[pmelisko]

Hello, thanks for great work.

There are 2 problems:

1. https://github.com/valor-software/ngx-bootstrap/blob/v5.6.0/src/positioning/modifiers/initData.ts

// Normalize placements that have identical main placement and variation ("right right" => "right").
const matches = placement.match(/^(left|right|top|bottom)* ?(?!\1)(left|right|top|bottom)?/); if (matches) { placement = matches[1] + (matches[2] ? ${matches[2]} : ''); }
that code should normalize values like "bottom bottom" to "bottom" etc, but this will remove "start" from "bottom start" placement which is default

if start and end are valid values, normalize regex should be like this
placement.match(/^(left|right|top|bottom|start|end)* ?(?!\1)(left|right|top|bottom|start|end)?/);
Output position from initData.ts
till version v5.5.0 -> "bottom start" is resolved as "bottom start"
from version v.5.6.0 -> "bottom start" is resolved as "bottom"

2. second problem is in https://github.com/valor-software/ngx-bootstrap/blob/v5.6.0/src/positioning/modifiers/shift.ts
   from v5.6.0 , this code was added, which will for "bottom start" will set target.left as shifOffsets.end instead of shiftOffsets.start.

data.offsets.target = {
...target, ...{
[side]: (side === shiftVariation ? (shiftOffsets as any).start[side] : (shiftOffsets as any).end[side])
}
};

Question: are start and end valid options? these options are not mentioned in docs. If yes there is no handling for these options, if no, solution should be to change default from "bottom start" to "bottom left"

Quick fix (default behaviour):
set placement as "bottom left"

[daniel-huser]

Same issue here.