Browser

all

OS

all

Screen size

all

Describe the bug

When a dropdown is present and has data-bs-auto-close="outside", then clicking outside while the dropdown is open scrolls back to the dropdown. This is particularly problematic when the dropdown items themselves are anchor links to other parts of the same page.

How to reproduce

Here is a minimal reproduction (see the attached codepen)

<ul class="navbar-nav ms-auto">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button">Click here</a>
    <div class="dropdown-menu dropdown-menu-start" data-bs-popper="static">
      <a class="dropdown-item" href="#destination">Then here</a>
    </div>
  </li>
</ul>

<div id="destination" style="margin-top: 1000px">
  <p>Now click here (should do nothing, but scrolls to the top)</p>
</div>

The page

• works fine with https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js
• with https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.js , the page scrolls back to the top when clicking the text at the bottom

Screenshots

• tabler version (broken): https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/raObLBV
• same code, with bootstrap (works): https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/XJmQKjK

The following illustrates a similar issue on the official documentation page for dropdowns

JSFiddle

https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/raObLBV