Problem in Dropdown in Bootstrap 4.2.1 #27903

afuno · 2018-12-22T14:48:57Z

Bootstrap 4.2.1 / macOS 10.14.2 / Chrome 71.0.3578.98 / Safari 12.0.2

Dropdown works: https://codepen.io/anon/pen/oJZKXW
Dropdown doesn't work: https://codepen.io/anon/pen/BvWXNO

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/posts' is not a valid selector.

The problem arises due to the presence of the link.
In the application there are many places where the link in this place is “just like that”.

I think... it is necessary to fix it not on my side.
What do you think?

XhmikosR · 2018-12-22T15:10:21Z

/CC @Johann-S

sts-ryan-holton · 2018-12-22T19:00:11Z

I'm unable to reproduce after upgrading from 4.1.3 to 4.2.1 & seems fine in the docs?

XhmikosR · 2018-12-22T19:24:55Z

@Johann-S: can't we make this a little less strict?

PixemWeb · 2018-12-22T22:14:11Z

I had the same issue. What I did to resolve it was looked over the code in the bootstrap.bundle.js from the 4.1.3 version, found the code that caused the issue in 4.2.1 and then replaced it.

Basically in the 4.1.3 version, I went to line 141 which doesn't cause an error.

    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;
        }
      },

I then copied that version over to the 4.2.1 version and replaced it at line number 141. The code below is what causes the issue and needs to be replaced with the snippet above.

    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;
    },

Just make sure to comment out the current code that you're replacing just in case it causes issues and test accordingly.

This was a quick fix and while I checked for other references of the code usage, there's about 12 in the file, it didn't seem to break anything. Note: I haven't tested with other bootstrap features like the Carousel. So make sure to test it with the various features you implement.

Hope this helps.

hiro20v · 2018-12-23T02:49:34Z

Probably the same problem is occurring.

Maybe from this commitment

Occurrence code.

<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>

  <a href="/home" class="nav-link"></a>

  <div class="bd-example">
    <nav id="navbar-example2" class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#fat">@fat</a>
        </li>
      </ul>
    </nav>
    <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
      <h4 id="fat">@fat</h4>
      <p></p>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $('[data-spy="scroll"]').each(function() {
      var $spy = $(this).scrollspy('refresh')
    })
  </script>
</body>

</html>

mattez · 2018-12-23T18:31:23Z

My colleague hot-fixed this by adding data attribute data-target to dropdown-toggle and corresponding ID to dropdown-menu. I don't know why, but it works.
See here:
https://codepen.io/mattez/pen/romzmO
(I forked and edit not working example from start of this thread)

Why is this starts working? There is no mention in the docs about any data-target in the Dropdown component (only in 'collapse').

ankurk91 · 2018-12-24T15:36:16Z

@mattez
You solution works but have one caveat, if user clicks on the same anchor tag again, it does not close (toggle) the dropdown.

ronit-mukherjee · 2018-12-28T04:54:03Z

@mattez
I am seeing a blocking error on the load of the bootstrap.
The error appears in the bootstrap.min.js
Bootstrap Version:- 4.2.1

The error is:-
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/c/10013' is not a valid selector.

Johann-S · 2018-12-28T05:19:31Z

A temporary fix would be to add a data-target attribute on your link to avoid that error, for example:

<a href="/profile" data-target="#" class="nav-link">Link</a>

mattez · 2018-12-28T10:08:14Z

@Johann-S If I understand this well, your fix #27912 will by implemented not earlier then in version v4.3?

Johann-S · 2018-12-28T10:11:36Z

exactly @mattez but we plan to cut v4.3 in shorter time compared to v4.2

DBenS · 2019-01-05T02:12:50Z

I'm having the same problem using the following code in ASP.NET:

              <a runat="server" Class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>
					<div class="dropdown-menu" aria-labelledby="navbarDropdown" >
						<a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
						<a class="dropdown-item" href="/AdminActions/Fabricantes.aspx">Fabricantes</a>
						<a class="dropdown-item" href="/AdminActions/Personagem.aspx">Personagens</a>
						<a class="dropdown-item" href="/AdminActions/EstadoUso.aspx">Estados</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
			        </div>
            </li>

When I jump to any link in a subfolder, the problem appears...

DATA-TARGET did not solve it.

Best regards

Homelux · 2019-01-08T14:03:36Z

Big porblem! in bootstrap 4.2.1 does NOT work in navbar dropdown menu if have link.

in older version all work good.

florianlacreuse · 2019-01-08T14:44:09Z

Just to let you know that since href with relative link is useless in most cases with dropdown you could just use href="#" to fix it too, just like in the navbar documentation.

Homelux · 2019-01-08T15:14:53Z

Just to let you know that since href with relative link is useless in most cases with dropdown you could just use href="#" to fix it too, just like in the navbar documentation.

href="#" NOT fix, in Joomla very often required to make a parent menu item for a category, and required just need a link!

not href="#"

florianlacreuse · 2019-01-08T15:16:39Z

In this case use fix provided by @Johann-S, no big deal over here.

Johann-S · 2019-01-08T15:21:13Z

@Homelux you should add a data-target attribute with the following value: # and you'll be able to keep your link.

There is an example here: #27903 (comment)

Homelux · 2019-01-08T15:23:11Z

data-target for parent link or child link ?

Johann-S · 2019-01-08T15:35:44Z

It depends which one trigger the dropdown

Johann-S · 2019-01-09T08:21:52Z

@Homelux if you want that, you have to specified a id attribute on the dropdown menu and fill the data-target attribute with the selector for your menu.

See my example:

the dropdown menu has the id myDropdown and the link's data-target is equal to #myDropdown and it works.

Same use case for @emage

Saintless · 2019-01-10T23:05:47Z

@Johann-S THANK YOU!!! That fixed it for me.

I had my menu set up like this, which was causing the error from above:

<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>

Essentially, I had to move the ID to the dropdown div, and reference it with data-target.

<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>

bjarnef · 2019-01-11T13:23:23Z

I have the same issue and I don't get the console error, when adding an unique id for the dropdown e.g. myDropdown-1234. However this doesn't seem to fix the issue to toggle the nav item - it opens to dropdown, but it doesn't close on next click.

When I just set `href="#" it works, but it seems only to work with two levels (first level + dropdown).

Johann-S · 2019-01-11T13:28:52Z

@bjarnef please open a new issue with a reduce test case (on CodePen or JSFiddle) it seems it's a different problem

bjarnef · 2019-01-11T13:37:49Z

@Johann-S it is the same issue, but the "fix" with adding the id only open the dropdown, but doesn't close it on next click.

Using href="#" works and open only child dropdown. When using the suggested solution with the id, it open also descendant menu levels.

Johann-S · 2019-01-11T13:43:41Z

@bjarnef not totally because you're using multi dropdown level which isn't supported by Bootstrap

bjarnef · 2019-01-11T13:58:08Z

@Johann-S yes, but it doesn't work with a single level either, when using the approach with an id, only when changing to href="#"

Do you have an example (on CodePen or JSFiddle) with Bootstrap v4.2.1, where it close the dropdown after second click?

Johann-S · 2019-01-11T14:28:06Z

I made one here: https://codepen.io/Johann-S/pen/WLaqQb?editors=1010

But I forget one thing, the data-target element should contains the selector of the parent dropdown element not, the menu element.

see:

<li id="parentDropdown" class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="/some-link" data-target="#parentDropdown" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

DBenS · 2019-01-14T01:05:40Z

@Johann-S , no one of the above solutions function with ASP.NET using Masterpage - and the 4.1.3 version was functioning very well.

See the code below. It functions at the main page (the first page the website runs) but when I entry in a DropDown NAV-Item, the "selection function" really stops.

<li id="Arquivos" Class="nav-item dropdown">
     <a runat="server" Class="nav-link dropdown-toggle" href="#" data-target="#Arquivos" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Arquivos</a>
	<div class="dropdown-menu" aria-labelledby="AdmFuncs" id="MyArqs" >
		<a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
		<a class="dropdown-item" href="/AdminActions/SubCategoria.aspx">Sub-Categorias</a>
		<a class="dropdown-item" href="/AdminActions/EstadoUso.aspx">Estados</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
	  </div>
</li>

I tried all the above solutions and all of them I had the same behavior.

Thank you for your attention.
Kindest regards,
David

bjarnef · 2019-01-14T08:29:21Z

@Johann-S that seems to work. Unfortunately it only works with one level of dropdown. I was hoping Bootstrap 4 supported that, since it wasn't possible in Boostrap 3, where you had to handle this yourself.

It seems you have do handle this in Boostrap 4 too something like this:
https://bootsnipp.com/snippets/featured/multi-level-navbar-menu

I don't see the benefits of using the Boostrap dropdown component then, when you have to handle this part of the logic anyway.

Johann-S · 2019-01-14T08:33:28Z

@DBenS I cannot help you more than that, if it works on your first page maybe there is something wrong on your other pages.

Do not hesitate to ask around in the official Slack team or Stack Overflow. See our readme for more details.

@bjarnef there is an issue open here : #27659 about multi level dropdown

emage · 2019-01-15T17:17:52Z

@Johann-S Thank you!
Your updated example solved my issues.

Thanks!

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/posts' is not a valid selector. twbs/bootstrap#27903 (comment)

twbs/bootstrap#27903

sheilasward · 2019-02-02T02:43:05Z

The problem is that Dropdowns do not work in bootstrap 4.2 unless you have the javascript files at the bottom:

yourchoice · 2019-02-07T09:38:45Z

Same for me

DOMException: Failed to execute 'querySelector' on 'Document': '/recettes' is not a valid selector.

O use in href="/recettes" for seo ...

shresthabiswas · 2019-02-18T11:33:17Z

data-target="#"

Still not working!

denniseh · 2019-03-02T21:48:10Z

Found that making id's start with a non-numeric character solved the "document.querySelector failed to execute" issue I was getting.

Remved for now twbs/bootstrap#27903

nbinobied · 2019-03-22T22:59:39Z

I'm having similar issue with 4.2.1 when adding Html.ActionLink, it causes the CSS/JS to break from the page. I'd appreciate a way to fix this.

Note: If I added href="#" attribute, it wouldn't load the page and it would cause the link to become /#

I'm getting the following error:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/ControlPanel' is not a valid selector.

<li class="nav-item">
       <a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
       <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
       <a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
       <a class="nav-link js-scroll-trigger" href="#team">Team</a>
</li>
<li class="nav-item">
       <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
<li class="nav-item">
       @Html.ActionLink("Control Panel", "Index", "ControlPanel", null, new { @class = "nav-link js-scroll-trigger" })
</li>

UPDATE: I was able to work around this error by adding attribute target-target="", allthought it copied the CCS styles of the div with id="navbarResponsive"

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
        <div class="container">
            <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav text-uppercase ml-auto">
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#team">Team</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
                    </li>
                    <li class="nav-item">
                        @Html.ActionLink("Control Panel", "Index", "ControlPanel", null, new { @class = "nav-link js-scroll-trigger", data_target = "#navbarResponsive" })
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Johann-S · 2019-03-23T08:04:37Z

Updating your version of Bootstrap to the latest release will fix that (v4.3.1)

afuno changed the title ~~Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/posts' is not a valid selector.~~ Problem in Dropdown in Bootstrap 4.2.1 Dec 22, 2018

mdo added js v4 labels Dec 22, 2018

Johann-S mentioned this issue Dec 23, 2018

getSelectorFromElement return null on bad selectors #27912

Merged

Johann-S added the has-pr label Dec 23, 2018

XhmikosR closed this as completed in #27912 Dec 23, 2018

ghost mentioned this issue Dec 25, 2018

dropdown link issue #27922

Closed

XhmikosR mentioned this issue Dec 28, 2018

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/c/10013' is not a valid selector. #27939

Closed

This was referenced Dec 29, 2018

Set 'javascript:;' or 'javascript:void(0)' to href at navigation items raises error in Angular 7+ with BS 4.2.1 #27942

Closed

Bootstrap 4.2.1 Navbar #27945

Closed

Homelux mentioned this issue Jan 8, 2019

Big porblem! in bootstrap 4.2.1 does NOT work in navbar dropdown menu. #28003

Closed

reidelliott mentioned this issue Jan 9, 2019

Adjusts to a valid selector and adds data-target to 0 depth element nicgene/bs4navwalker#25

Closed

wynksaiddestroy mentioned this issue Jan 14, 2019

why not work dropdown navbar v4.2.1 twbs/bootstrap-rubygem#170

Closed

ve3 mentioned this issue Jan 15, 2019

dropdown menu doesn't work anymore Rundiz-WP/bootstrap-basic4#31

Closed

linkslegend added a commit to linkslegend/sage-megamenu that referenced this issue Jan 21, 2019

fixed bootstrap 4.2.1 href bug

fae31cd

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/posts' is not a valid selector. twbs/bootstrap#27903 (comment)

Johann-S mentioned this issue Jan 22, 2019

Error with link in href in Dropdown Toggle #28099

Closed

alex-418 mentioned this issue Jan 24, 2019

megamenu regression with bootstrap >= 4.2 BCcampus/bcc-sage#312

Closed

excid3 added a commit to excid3/gorails-app-template that referenced this issue Jan 31, 2019

Update bootstrap to 4.2 and fix js dropdown error

faed499

twbs/bootstrap#27903

jenstroeger mentioned this issue Feb 4, 2019

Scrollspy with real href="url" in navbar throws Javascript exception. #28171

Closed

bonesoul mentioned this issue Feb 14, 2019

update bootstrap to 4.3.1 wpsix/gameforest#22

Closed

nexero mentioned this issue Feb 24, 2019

Dropdown menu items won't work RDTK/CITKat#4

Closed

nleigh added a commit to nleigh/nleigh.github.io that referenced this issue Mar 10, 2019

issue with link in navbar

2c50712

Remved for now twbs/bootstrap#27903

twbs locked and limited conversation to collaborators Mar 23, 2019

Uh oh!

Problem in Dropdown in Bootstrap 4.2.1 #27903

Problem in Dropdown in Bootstrap 4.2.1 #27903

Comments

afuno commented Dec 22, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

XhmikosR commented Dec 22, 2018

Uh oh!

sts-ryan-holton commented Dec 22, 2018

Uh oh!

XhmikosR commented Dec 22, 2018

Uh oh!

PixemWeb commented Dec 22, 2018

Uh oh!

hiro20v commented Dec 23, 2018

Uh oh!

mattez commented Dec 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ankurk91 commented Dec 24, 2018

Uh oh!

ronit-mukherjee commented Dec 28, 2018

Uh oh!

Johann-S commented Dec 28, 2018

Uh oh!

mattez commented Dec 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Johann-S commented Dec 28, 2018

Uh oh!

DBenS commented Jan 5, 2019

Uh oh!

Homelux commented Jan 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

florianlacreuse commented Jan 8, 2019

Uh oh!

Homelux commented Jan 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

florianlacreuse commented Jan 8, 2019

Uh oh!

Johann-S commented Jan 8, 2019

Uh oh!

Homelux commented Jan 8, 2019

Uh oh!

Johann-S commented Jan 8, 2019

Uh oh!

Johann-S commented Jan 9, 2019

Uh oh!

Saintless commented Jan 10, 2019

Uh oh!

bjarnef commented Jan 11, 2019

Uh oh!

Johann-S commented Jan 11, 2019

Uh oh!

bjarnef commented Jan 11, 2019

Uh oh!

Johann-S commented Jan 11, 2019

Uh oh!

bjarnef commented Jan 11, 2019

Uh oh!

Johann-S commented Jan 11, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DBenS commented Jan 14, 2019

Uh oh!

bjarnef commented Jan 14, 2019

Uh oh!

Johann-S commented Jan 14, 2019

Uh oh!

emage commented Jan 15, 2019

Uh oh!

sheilasward commented Feb 2, 2019

Uh oh!

yourchoice commented Feb 7, 2019

Uh oh!

shresthabiswas commented Feb 18, 2019

Uh oh!

denniseh commented Mar 2, 2019

afuno commented Dec 22, 2018 •

edited

Loading

mattez commented Dec 23, 2018 •

edited

Loading

mattez commented Dec 28, 2018 •

edited

Loading

Homelux commented Jan 8, 2019 •

edited

Loading

Homelux commented Jan 8, 2019 •

edited

Loading

Johann-S commented Jan 11, 2019 •

edited

Loading

nbinobied commented Mar 22, 2019 •

edited

Loading