Problem in Dropdown in Bootstrap 4.2.1

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?

@Johann-S

/CC @Johann-S

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

@Johann-S

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

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.

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>

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').

@mattez

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

@mattez

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

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>

@Johann-S

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

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>

@Johann-S

@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

@Johann-S

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

@DBenS

@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

@Johann-S

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

Thanks!

fixed bootstrap 4.2.1 href bug

Update bootstrap to 4.2 and fix js dropdown error

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

Same for me

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

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

data-target="#"

Still not working!

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

issue with link in navbar

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>

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

Navigation Menu

Repository navigation

Problem in Dropdown in Bootstrap 4.2.1 #27903

24 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Problem in Dropdown in Bootstrap 4.2.1 #27903

Description

Activity

XhmikosR commented on Dec 22, 2018

sts-ryan-holton commented on Dec 22, 2018

XhmikosR commented on Dec 22, 2018

PixemWeb commented on Dec 22, 2018

hiro20v commented on Dec 23, 2018

mattez commented on Dec 23, 2018

ankurk91 commented on Dec 24, 2018

ronit-mukherjee commented on Dec 28, 2018

Johann-S commented on Dec 28, 2018

mattez commented on Dec 28, 2018

24 remaining items

Johann-S commented on Jan 11, 2019

DBenS commented on Jan 14, 2019

bjarnef commented on Jan 14, 2019

Johann-S commented on Jan 14, 2019

emage commented on Jan 15, 2019

sheilasward commented on Feb 2, 2019

yourchoice commented on Feb 7, 2019

shresthabiswas commented on Feb 18, 2019

denniseh commented on Mar 2, 2019

nbinobied commented on Mar 22, 2019

Johann-S commented on Mar 23, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions