jquerysemantic-uibootstrap-5

Semantic UI Dropdown Not Working With Bootstrap 5 Dropdown

I am trying to make a select dropdown list with Semantic UI. I have followed the example on their Docs: Semantic UI Dropdown Usage.

But it looks like in Bootstrap 5 calling $('.ui.dropdown').dropdown() doesn't work properly, it initially worked well when I were using Bootstrap 4 but since I have upgraded to Bootstrap 5 , so I started to get this error:

bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'classList' of undefined
    at o.r.show (bootstrap.min.js:6)
    at o.r.toggle (bootstrap.min.js:6)
    at HTMLSelectElement.<anonymous> (bootstrap.min.js:6)
    at HTMLSelectElement.n (bootstrap.min.js:6)

Can some help out, I am stuck trying to figure out what might be the reason this is happening. I tried re-arranging the order of JS includes:

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bs-init.js"></script>
<script src="/apis/map.api.google.js"></script>
<script src="/plugins/hammer.min.js"></script>
<script src="/plugins/semantic.min.js"></script>
<script src="/plugins/bmd.js"></script>
<script src="/app.ca.layout.js"></script>
Solution

  • Add the data attribute data-bs-toggle="dropdown", like below.

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>

    then add this to your index.html

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>