CODEWITHSUNDEEP
bootstrap-4popper.js
C.Ramp
C.Ramp

Reputation: 268

TypeError: popper is null

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

enter image description here

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.

Upvotes: 4

Views: 2040

Answers (2)

Attila Fulop
Attila Fulop

Reputation: 7011

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>

Upvotes: 0

Nisharg Shah
Nisharg Shah

Reputation: 19572

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Upvotes: 3

Related Questions