Bootstrap: Dropdown: jQuery throws with empty ID selector

Created on 12 Dec 2016 · 14Comments · Source: twbs/bootstrap

Hello,

While following the documentation, I've stumbled upon Dropdown examples: http://getbootstrap.com/javascript/#via-data-attributes-1

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

When trying it with jQuery v2.1.3, everything works fine and clicking the anchor displays the dropdown.

However, when using jQuery v3.1.0 clicking the anchor follows the link.

confirmed has-pr js v4

Source

gpakosz

Most helpful comment

i have the same error on drupal 8.4 and jquery 3.2.1 build-in by default, where i use bootsrap 3.3.7.
is there any way to fix this error on bootsrap 3.3.7? i cannot use v4

Alecto on 17 Oct 2017

👍3

All 14 comments

Support for v3 has ceased. Please let us know if your issue affects v4.

bardiharborow on 13 Dec 2016

Hmm with v4 it seems markup is totally different anyways

gpakosz on 13 Dec 2016

If this isn't affecting v4, we'll close it out as a won't fix.

mdo on 13 Dec 2016

This is what I'm experiencing with v4:

when using a link/anchor as a toggler with data-target="#" as per instructed in v3 documentation: http://codepen.io/anon/pen/BQqBzw
when using a link/anchor as a toggler without data-target="#": http://codepen.io/anon/pen/oYavBb

I appreciate that v4 dropdowns documentation doesn't mention data-target="#" while v3 documentation used to. However, I would say people migrating from v3 to v4 will face that situation as the migration guide doesn't instruct to remove data-target="#" in that case.

In that respect, can you please enlighten me about:

what's the current or past role of data-target="#" exactly?
what are the tradeoffs between using <button> vs <a> for dropdown togglers?

gpakosz on 13 Dec 2016

As it said in V3 documentation :

To keep URLs intact with link buttons, use the data-target attribute instead of href="#".

~~And the difference between <button> and <a> depends on your needs, if you want to toggle the dropdown from a classic link or from a button~~

Johann-S on 13 Dec 2016

Should one understand that "keeping the URLs intact" mean clicking the link toggler won't toggle the dropdown?

About the difference between <button> and <a> as far as I can tell, using either produces the same rendering. That's why I was asking whether there's subtle difference I overlooked.

gpakosz on 13 Dec 2016

IMO "keeping the URLs intact" means to not add # or any anchors to the end of the URL but the dropdown have to be toggled.

Hmm yeah my bad on the difference between <button> and <a> maybe they are a compatibility reason I'm not sure.

Johann-S on 13 Dec 2016

what's the current or past role of data-target="#" exactly?

Its role is to select the dropdown menu that the button or link should toggle by ID. If you don't use data-target it will use the value of the href attribute. This makes it possible to place the toggler in a different element than the dropdown itself.

jQuery produces an error in v3 because # is no longer a valid selector and that's why the behavior described here occurs. We need to fix this.

what are the tradeoffs between using

A button is semantically more correct, the link is most often found in navbars. If you don't need to have an anchor, I would always use a button. Maybe someone else can weigh in on this though since I'm not the expert on these kinds of questions.

hnrch02 on 1 Jan 2017

❤2

X-Ref: #21341, #20019

hnrch02 on 1 Jan 2017

Sorry @hnrch02 but it seems it doesn't appear in V4, it's the case in V3

But as @gpakosz said :

However, I would say people migrating from v3 to v4 will face that situation as the migration guide doesn't instruct to remove data-target="#" in that case.

Johann-S on 6 Jan 2017

@Johann-S How does it not appear in v4? The error occurs in this Bin.

Even though it appears that data-target is no longer documented, the functionality still exists in the v4 codebase and works just fine.

hnrch02 on 8 Jan 2017

Oh ok you're right sorry @hnrch02

Johann-S on 8 Jan 2017

i have the same error on drupal 8.4 and jquery 3.2.1 build-in by default, where i use bootsrap 3.3.7.
is there any way to fix this error on bootsrap 3.3.7? i cannot use v4

Alecto on 17 Oct 2017

👍3

@Alecto I just opened https://www.drupal.org/project/bootstrap/issues/2927101