I’m trying to show a dropdown via JS. Unfortunately it seems like there’s a bug in Bootstrap 5.
In this example code, showing the modal works, but showing the dropdown throws an exception: Uncaught TypeError: Cannot read property 'classList' of undefined at _e.show (dropdown.js:140)
JavaScript
x
52
52
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<title>Title</title>7
8
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">9
</head>10
11
<body>12
13
<div id="testDropdown" class="dropdown">14
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">15
Dropdown button16
</button>17
<ul class="dropdown-menu">18
<li><a class="dropdown-item" href="#">Action</a></li>19
<li><a class="dropdown-item" href="#">Another action</a></li>20
<li><a class="dropdown-item" href="#">Something else here</a></li>21
</ul>22
</div>23
24
<div id="testModal" class="modal" tabindex="-1">25
<div class="modal-dialog">26
<div class="modal-content">27
<div class="modal-header">28
<h5 class="modal-title">Modal title</h5>29
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>30
</div>31
<div class="modal-body">32
<p>Modal body text goes here.</p>33
</div>34
</div>35
</div>36
</div>37
38
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>39
40
<script>41
42
let testModal = document.getElementById("testModal");43
//new bootstrap.Modal(testModal).show(); //works44
45
let testDropdown = document.getElementById("testDropdown");46
new bootstrap.Dropdown(testDropdown).show(); //doesnt work47
48
</script>49
50
</body>51
</html>52
Am I doing something wrong or is this a bug?
Thanks in advance.
Advertisement
Answer
I got it working without using a button:
JavaScript
1
50
50
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
8
<title>Dropdown Test</title>9
10
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">11
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">12
</head>13
14
<body>15
16
<div class="container-fluid">17
18
<div class="row justify-content-center">19
<div class="w-75 mt-2">20
21
<div class="input-group">22
<span class="input-group-text"><i class="bi bi-search"></i></span>23
<input type="text" class="form-control" placeholder="Search for something">24
<button class="btn btn-primary" type="button">Search</button>25
</div>26
27
<div class="dropdown">28
<div data-bs-toggle="dropdown" id="DROPDOWN_SEARCH"></div>29
<div class="dropdown-menu w-100">30
<a class="dropdown-item" href="#">Result 1</a>31
<a class="dropdown-item" href="#">Result 2</a>32
<a class="dropdown-item" href="#">Result 3</a>33
</div>34
</div>35
36
</div>37
</div>38
39
</div>40
41
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>42
43
<script>44
let searchDropdown = new bootstrap.Dropdown("#DROPDOWN_SEARCH");45
searchDropdown.show();46
</script>47
48
</body>49
50
</html>