I need to double click to open dropdowns.

Hi guys!

_You can test the issue here: http://dev.3818.com.ar/muq-bug-dropdown/_

Recently I had some problems with Popper JS, dropdowns and other elements did not work. I have solved it using the file bootstrap.bundle.min.js of version 4.0.0 of Bootstrap (apparently it has Popper JS included).

However, dropdowns have a strange behavior. When I make the first click in the dropdown, bootstrap adds two attributes.

x-placement="bottom-start"

style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;"

Then, when I make the second click, I can display the contents of the dropdown.

Details:

Before first click: <div _ngcontent-c2="" aria-labelledby="dropdownMenuButton" class="dropdown-menu">

After first click: <div _ngcontent-c2="" aria-labelledby="dropdownMenuButton" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 31px, 0px); top: 0px; left: 0px; will-change: transform;">

After second click: <div _ngcontent-c2="" aria-labelledby="dropdownMenuButton" class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 31px, 0px); top: 0px; left: 0px; will-change: transform;">

---

Scripts section inside angular-cli.json

---

The issue was tested in:

• Chrome 64.0.3282.119 (Official build) (64 bits)
• Firefox [Quantum] 58.0 (64-bit)
• Yandex 17.11.1.1087 beta (64-bit)
• Vivaldi 1.13.1008.44 (Stable channel) (64 bits)

Project details:

• Bootstrap 4.0.0
• bootstrap bundle js
• Angular 2 (All other styles work well. All my sass works well too.)

Others:

• OS: Archlinux

[flashadvocate]

That’s a pretty vague solution

[lucasromerodb]

@Johann-S Sure. Delete all JS calls from index.html and call it in angular-cli.json I have noticed this solution when reporting the error. Now the dropdowns work well.