TypeError: popper is null

Question

My problem: when i click on the dropdown, i have an error message in my console:

An extract of my twig:

<select class="tabledit-input form-control dropdown-toggle" data-toggle="dropdown" name="color" >
    {% for item in items %}
        <option value="{{ item.id }}" selected="">{{ item.Label }}</option>
    {% endfor %}
</select>
<button type="button" class="btn btn-success validbtn">Valid</button>

I check in my package.json and in the app.js and everything is ok. I have read that it could be link to the data-toggle="dropdown".But i don't know where is the error.

I don't know if it's important but this select is in a cell of a datatable.

Answer 1

Please don't use dropdown classes with select tag because of both select and dropdown is used for different reasons.

select tag is usually used for posting some data to the backend and dropdown is usually used for redirection.

If you are using the dropdown, don't forget to add popper.js.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 2

I had the same error when the button with data-toggle="dropdown" wasn't a direct child of the <div class="dropdown"> element.

The solution was to move it one level up, ie:

❌ Doesn't work:

<div class="dropdown">
  <span>
    <button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
  </span>
  <div class="dropdown-menu">
    <!-- items -->
  </div>
</div>

✔ Works:

<div class="dropdown">
  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu">
    <!-- items -->
  </div>
</div>