New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem in Dropdown in Bootstrap 4.2.1 #27903

Closed
afuno opened this Issue Dec 22, 2018 · 41 comments

Comments

Projects
@afuno
Copy link

afuno commented Dec 22, 2018

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?

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

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Dec 22, 2018

/CC @Johann-S

@sts-ryan-holton

This comment has been minimized.

Copy link
Contributor

sts-ryan-holton commented Dec 22, 2018

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

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Dec 22, 2018

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

@mdo mdo added js v4 labels Dec 22, 2018

@PixemWeb

This comment has been minimized.

Copy link

PixemWeb commented Dec 22, 2018

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

This comment has been minimized.

Copy link

hiro20v commented Dec 23, 2018

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

This comment has been minimized.

Copy link
Contributor

mattez commented Dec 23, 2018

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

This comment has been minimized.

Copy link

ankurk91 commented Dec 24, 2018

@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

This comment has been minimized.

Copy link

ronit-mukherjee commented Dec 28, 2018

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

bootstrap-error
bootstrap-error2

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Dec 28, 2018

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

This comment has been minimized.

Copy link
Contributor

mattez commented Dec 28, 2018

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

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Dec 28, 2018

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

@DBenS

This comment has been minimized.

Copy link

DBenS commented Jan 5, 2019

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

This comment has been minimized.

Copy link

Homelux commented Jan 8, 2019

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

in older version all work good.

@florianlacreuse

This comment has been minimized.

Copy link
Contributor

florianlacreuse commented Jan 8, 2019

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

This comment has been minimized.

Copy link

Homelux commented Jan 8, 2019

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

This comment has been minimized.

Copy link
Contributor

florianlacreuse commented Jan 8, 2019

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

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Jan 8, 2019

so you should add data-target to your parent link

@Homelux

This comment has been minimized.

Copy link

Homelux commented Jan 8, 2019

thanks

and please make hover dropdown for navbar as foundation, very need!

EDIT:

data-target dont work

http://stihidom.ru/

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Jan 8, 2019

Change your link by:

<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#" aria-expanded="false">Наши услуги</a>

it'll work

@twbs twbs deleted a comment from Homelux Jan 8, 2019

@Homelux

This comment has been minimized.

Copy link

Homelux commented Jan 8, 2019

not, i need href="/uslugi" for seo, not href="#"

parent link -> article category with link /uslugi
child links -> articles from this category with links:

/uslugi/article1
/uslugi/article2
/uslugi/article3

therefore it is important parent link /uslugi for seo, not href="#"

in bootstrap 3 and bootstrap 4.1.3 it work good.

Please help.

@emage

This comment has been minimized.

Copy link

emage commented Jan 8, 2019

@Johann-S The fix does not work for me as well.

My link:

<a class="nav-link dropdown-toggle" href="/company/contactus.aspx" data-target="#" role="button" id="contact-phone-listing" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact Us</a>

Our code requires a link in the HREF.

It worked great in version 4.1.3.

@Homelux

This comment has been minimized.

Copy link

Homelux commented Jan 8, 2019

Yes, our code requires a link in the HREF.

It worked great in version 4.1.3.

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Jan 9, 2019

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

image

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

This comment has been minimized.

Copy link

Saintless commented Jan 10, 2019

@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

This comment has been minimized.

Copy link

bjarnef commented Jan 11, 2019

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

This comment has been minimized.

Copy link
Member

Johann-S commented Jan 11, 2019

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

@bjarnef

This comment has been minimized.

Copy link

bjarnef commented Jan 11, 2019

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

image

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

@Johann-S

This comment has been minimized.

Copy link
Member

Johann-S commented Jan 11, 2019

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

@bjarnef

This comment has been minimized.

Copy link

bjarnef commented Jan 11, 2019

@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

This comment has been minimized.

Copy link
Member

Johann-S commented Jan 11, 2019

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

This comment has been minimized.

Copy link

DBenS commented Jan 14, 2019

@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

This comment has been minimized.

Copy link

bjarnef commented Jan 14, 2019

@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

This comment has been minimized.

Copy link
Member

Johann-S commented Jan 14, 2019

@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

This comment has been minimized.

Copy link

emage commented Jan 15, 2019

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

Thanks!

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

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

excid3 added a commit to excid3/jumpstart that referenced this issue Jan 31, 2019

@sheilasward

This comment has been minimized.

Copy link

sheilasward commented Feb 2, 2019

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

<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" 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>
@yourchoice

This comment has been minimized.

Copy link

yourchoice commented Feb 7, 2019

Same for me

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

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

@shresthabiswas

This comment has been minimized.

Copy link

shresthabiswas commented Feb 18, 2019

data-target="#"

Still not working!
data-target

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment