Dropdown: jQuery throws with empty ID selector

[gpakosz]

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.

[bardiharborow]

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

[gpakosz]

Hmm with v4 it seems markup is totally different anyways

[mdo]

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

[gpakosz]

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?

[Johann-S]

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

[gpakosz]

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.

[Johann-S]

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.

[hnrch02]

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 vs for dropdown togglers?

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]

X-Ref: #21341, #20019

[Johann-S]

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.

[hnrch02]

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

[Johann-S]

Oh ok you're right sorry @hnrch02

[Alecto]

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

[Lendude]

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