I am working on a project which I started building on bootstrap 4.0.0. During this project, I had updated bootstrap regulary whenever the new versions ( 4.1.0
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
//selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';
}
return (selector && document.querySelector(selector)) ? selector : null;
}
this function through error due to document.querySelector not find id like "#home" so if any string not contain # prefix it through error. so replace this:
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
from this
selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';
I was having this issue, and a comment on this reported issue clued me into the solution. I was copying the example from the Bootstrap docs, and I had to remove the ID from the parent link, and instead have that ID on the container for the child links, without the aria-labeledby property, and add a reference in the parent link data-target property.
This example shows what I was doing, which caused the console errors:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#" data-toggle="dropdown" id="navToggleCommercial" role="button" aria-haspopup="true" aria-expanded="false">
Commercial
</a>
<div class="dropdown-menu" aria-labelledby="navToggleCommercial">
<a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
</div>
</li>
This is the solution that worked for me:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#navToggleCommercial" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Individual
</a>
<div class="dropdown-menu" id="navToggleCommercial">
<a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
</div>
</li>
Here is the solution that works for me
Snippet from Bootstrap 4.1.3
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
selector = element.getAttribute('href') || '';
}
try {
return document.querySelector(selector) ? selector : null;
} catch (err) {
return null;
}
},
Replace it from Bootstrap 4.2.1
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
}
return selector && document.querySelector(selector) ? selector : null;
},
Thanks to PixemWeb github solution
For more info here is the link https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715
as others said in comments
This is a bug in Bootstrap 4.2.1 and will be fixed in 4.3.0: github.com/twbs/bootstrap/issues/27903
just need to user 4.3.0 of bootstrap
just replace this
<script src="https://cdn.rtlcss.com/bootstrap/v4.3.0/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
with this
<script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
Make sure that the anchor of the dropdown menu item is #
instead of a path.
Solution:
I use to Link instead of an a
in React
and replace it with simple <a href="#" ...
and it is working now.
=== Change in bootstrap.js v4.2.1 ===
Find below block
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
}
return selector && document.querySelector(selector) ? selector : null;
},
Need to add try and catch exception only as below
Replace
return selector && document.querySelector(selector) ? selector : null;
with
try {
return selector && document.querySelector(selector) ? selector : null;
} catch (err) {
return null;
}
=== Change in bootstrap.min.js v4.2.1 ===
Replace
return e&&document.querySelector(e)?e:null
with
try{return e&&document.querySelector(e)?e:null}catch(err){return null;}