Skip to content
GitLab
Open
Issue created by Administrator@rootContributor

Bootstrap dropdown toggle prevents links

Created by: 719media

I use bootstrap dropdowns in some areas of my application as a replacement for traditional select boxes, so that:

  1. The dropdown menu can have more complicated/styled options than a traditional select option could, and
  2. The data-bs-toggle="dropdown" input box (often a <button> like in the bootstrap docs, but in theory can be a <div tabindex="0"> for semantic reasons) showing the selected option can have more complicated/styled options than a traditional select could. For example, I can have a dropdown toggle that is used to select a customer, which displays the customer name and email, and have the "email" use href to link out to the customer page. Very intuitive and helpful for an administrative application.

However, one problem is that bootstrap does preventDefault() on the data-bs-toggle="dropdown" element. See:

https://github.com/twbs/bootstrap/blob/main/js/src/dropdown.js#L234 https://github.com/twbs/bootstrap/blob/main/js/src/dropdown.js#L501

Trying to determine why this is the case (specifically within the data-bs-toggle="dropdown" element), I can't come up with any good reasons why this is the case. Obviously, I may be overlooking something, but to me this is limiting design with no upside.

I have a PR for this change:

https://github.com/twbs/bootstrap/pull/34396

With a reproduction jsfiddle before the PR: https://jsfiddle.net/2b4o8gw5/ and after PR fix: https://jsfiddle.net/94r7bxjf/