Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Bootstrap 5.x newst Problem for bottom dropdown of collapse
See original GitHub issueBootstrap version: 5.0.0-beta2 OS: Windows 10 Browsers tested: Google Chrome 88.0.4324.190 (64-bit), Microsoft Edge 88.0.705.74 (64-bit)
issue : 1.
Uncaught TypeError: Cannot read property 'classList' of undefined
at HTMLDocument.clearMenus (bootstrap.js:2443)
at HTMLDocument.handler (bootstrap.js:415)
dropdownMenu.classList.remove(CLASS_NAME_SHOW$2); <- bootstap.js line 2443
bootstrap.js:939 Uncaught TypeError: Cannot read property 'removeAttribute' of undefined
at Object.removeDataAttribute (bootstrap.js:939)
at HTMLDocument.clearMenus (bootstrap.js:2442)
at HTMLDocument.handler (bootstrap.js:415)
Manipulator.removeDataAttribute(dropdownMenu, 'popper'); <- bootstrap.js line 2442
I made an exception with an if statement to solve the error. (1, 2) original :
dropdownMenu.classList.remove(CLASS_NAME_SHOW$2);
toggles[i].classList.remove(CLASS_NAME_SHOW$2);
Manipulator.removeDataAttribute(dropdownMenu, 'popper');
EventHandler.trigger(toggles[i], EVENT_HIDDEN$1, relatedTarget);
to
if (dropdownMenu) {
dropdownMenu.classList.remove(CLASS_NAME_SHOW$2);
Manipulator.removeDataAttribute(dropdownMenu, 'popper');
}
toggles[i].classList.remove(CLASS_NAME_SHOW$2);
EventHandler.trigger(toggles[i], EVENT_HIDDEN$1, relatedTarget);
bootstrap.bundle.js:610 Uncaught RangeError: Maximum call stack size exceeded.
at Object.trigger (bootstrap.bundle.js:610)
at Collapse.show (bootstrap.bundle.js:1756)
at Collapse.toggle (bootstrap.bundle.js:1715)
at new Collapse (bootstrap.bundle.js:1701)
at HTMLDivElement.<anonymous> (index.html?_ijt=qucekkiduplu4pd7mnva81m8h8:235)
at Object.trigger (bootstrap.bundle.js:610)
at Collapse.show (bootstrap.bundle.js:1756)
at Collapse.toggle (bootstrap.bundle.js:1715)
at new Collapse (bootstrap.bundle.js:1701)
at HTMLDivElement.<anonymous> (index.html?_ijt=qucekkiduplu4pd7mnva81m8h8:235)
error code : bootstrap.bundle.js line 1756~1760 It’s an error caused by infinite recurrence, but I don’t know why. It works fine without code below the show in collapse.
And “show” and “Hide” in “collapse” operate as “Toggle”.
var startEvent = EventHandler.trigger(this._element, EVENT_SHOW);
if (startEvent.defaultPrevented) {
return;
}
Test case:
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
accodian1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="dropdown mb-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="gpugroup" data-bs-toggle="dropdown" aria-expanded="false">
dropdown1
</button>
<ul class="dropdown-menu" id="gpugroupitem" aria-labelledby="gpugroup">
</ul>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="OC-1">input1</span>
<input type="number" id="power" class="form-control" aria-describedby="OC-1">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="OC-3">input2</span>
<input type="number" id="core" class="form-control" aria-describedby="OC-3">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="OC-4">input3</span>
<input type="number" id="mem" class="form-control" aria-describedby="OC-4">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="OC-5">input4</span>
<input type="number" id="fan" class="form-control" aria-describedby="OC-5">
</div>
<button class="btn btn-primary" id="Save">btn1</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
accodian2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkbox5">
<label class="form-check-label" for="checkbox5">checkbox1</label>
</div>
<div class="collapse">
<div class="card card-body">
<div class="form-check">
<input class="form-check-input" type="radio" name="checkbox" id="checkbox1">
<label class="form-check-label" for="checkbox1">
checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="checkbox" id="checkbox2" checked>
<label class="form-check-label" for="checkbox2">
checkbox
</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text">select</label>
<select class="form-select" id="inputGroupSelect02">
<option selected value="1">1</option>
</select>
<label class="input-group-text">label1</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text">select</label>
<select class="form-select" id="inputGroupSelect02">
<option selected value="1">1</option>
</select>
<label class="input-group-text">label2</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Collapse · Bootstrap v5.0
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific...
Read more >Change the collapse direction bootstrap - Stack Overflow
In your fiddle you are loading bootstrap 3.x script, which is inconsistent with the styles, which are 5.X. Independent of the version, ...
Read more >Bootstrap Dropdowns - examples & tutorial
Responsive dropdown/caret built with Bootstrap 5. Examples of navbar dropdown, dropdown list, submenu, dropdown toggle, dropdown hover, hamburger icon ...
Read more >Dropdown | Components - BootstrapVue
The dropdown toggle button can have one of the standard Bootstrap contextual variants applied by setting the prop variant to success , primary...
Read more >Bootstrap JS Dropdown Reference - W3Schools
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list. For a tutorial about...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For anyone experiencing this with Bootstrap 5 where they are not including popper twice. I had a similar error in an es6/webpack project
In my ignorance I thought that I needed to initialize a dropdown by calling new
I immediately noticed the cryptic error “bootstrap dropdown cannot read property ‘classlist’ of undefined” and was bewildered until I read this thread which gave me the hint that it was being twice instantiated… And in fact, this was exactly the issue, thank you @alpadev, I removed the call to new and saw that popper was already finding the dropdown and initializing it, and my calling new was creating some weird race condition or some other undiscovered conflict.
I thought I needed to call new with Dropdown because my experience prior with Modal and Collapse, which both required that I call new for them to work, not so with Dropdown, maybe someone with the wisdom of bootstrap can explain why this is the case?
Closing per the above comment, thanks @alpadev!