Динамический выпадающий.Включить только показ в первом выпадающем меню

Question

Я вставляю Dropdowns в динамическую форму.Проблема в том, когда я вставляю более одного выпадающего списка.

Когда я нажимаю любую раскрывающуюся кнопку, список переключателей отображается только над первой раскрывающейся кнопкой, а не над раскрывающейся кнопкой, которую я нажал.

Скажем, у меня есть 3 выпадающие кнопки, вставленные в форму.Если я нажму Dropdown 2 или 3;список содержимого показан выше Dropdown 1.

Это код, который я вставляю в форму.

let vendor = `<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu test" id="vendor['+nextindex+']" name="vendor['+nextindex+']" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
  </ul>
</div>`

Answer 1

Мне удалось найти решение. Bootstrap 4 Dropdown - отключить автоматическое размещение, вызванное popper.js

Это была проблема с popper.js.