1

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>
Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
OBI PASCAL BANJUARE
  • 315
  • 2
  • 8

2 Answers2

1

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>
Ben Supanga
  • 26
  • 2
0

Try to initialize your dropdown like this:

$('.ui.dropdown')
  .dropdown();

Or add simple inside the class attribute like this:

<div class="ui simple dropdown item">

See all semantic-ui dropdown menu do not work.

For more; see the documentation.

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
  • Still didn't work out form. I think Bootstrap dropdown and semantic dropdown plugin are having some collusion when initialization. One bind itself before the other which i don't know why, because the load other shows clearly that semantic supposed to bind its .dropdown() after which Bootstrap has bind his then when the semantic load it supposed to override the bootstrap function. With this understanding i have tried loading the files sequentially yet still the same error. – OBI PASCAL BANJUARE Apr 16 '21 at 11:57
  • Am Using Bootstrap 5. – OBI PASCAL BANJUARE Apr 16 '21 at 11:58
  • In Bootstrap 4 i don't experience this kind of bug. – OBI PASCAL BANJUARE Apr 16 '21 at 11:58
  • @OBIPASCALBANJUARE This occurs because both bootstrap and semantic-ui have the same .dropdown() method used for displaying dropdown menus. – Kevin M. Mansour May 04 '21 at 19:53
  • Kevin M. So, is they no fixed for this conflict? – OBI PASCAL BANJUARE Jun 16 '21 at 14:57
  • @OBIPASCALBANJUARE Yes, there is no fix yet (Offcial from Docs). The last Library is will overrides others.Please Just click on the green check mark next to my answer and click the up arrow to help new people in Stack Overflow. – Kevin M. Mansour Jun 16 '21 at 15:22