Bootstrap Offcanvas fade duplicating between different parts of the site?

Question

I'm working on my site, using Ruby on Rails. Was recently tasked to implement Bootstrap instead of custom CSS styling. No problem there. However, the issue comes when I use the Offcanvas menu from Bootstrap. There is a fade effect which shows up twice when clicked the first time, and then if I access the Offcanvas menu from another part of the site, it doubles the fade, etc. If I refresh the page, the fade number goes back to two fades. These fades are represented as divs, like so (these are automatically generated when a user clicks the menu):

<div class="offcanvas-backdrop fade show"></div>

Also, when I click the close button (from Bootstrap), it removes ALL of the fade divs, no matter how many there are, which is the intended effect I want for clicking off of the menu.

<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>

Is there any way for me to click off of the menu and have the fade completely disappear, instead of having to remove 2, then 4, etc. divs off of my screen (like the button)?

Here is my full Offcanvas portion of the file:

<nav class="navbar navbar-light bg-light fixed-top">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-header">
              <a class="nav-link" href="/support/search" id="logo_img"><%= image_tag "logo.png"%></a>
              <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
              <ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
                <li class="nav-item">
                  <a class="nav-link" href="/support/search">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/show_num_of_registered_users">Statistics</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/show_appusers_referrals2">Referrals over 30</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/claims">Claims</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/deletedaccs">Delete user</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/get_new_emails">Get new referral emails</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/manigo_hooks">Manigo Hooks</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/stakings">Stakings</a>
                </li>
                <% if !current_admin.superadmin.nil? && current_admin.superadmin?%>
                  <li class="nav-item">
                    <a class="nav-link" href="/support/get_voucher_count">Voucher count</a>
                  </li>
                <% end %>
                <%= form_with url: "/support/search_res", class: "d-flex", method: :get do |form| %>
                  <%= form.text_field :query, class: "form-control me-2", placeholder: "Search...", onpaste: 'pasteAndGo()' %>
                  <button class="btn btn-outline-success" id="nav_search">Search</button>
                <% end %>
              </ul>
            </div>
          </div>
        </div>
      </nav>

Edit: I was able to reduce it from doubling to only having the fade replicate once per different page. So, when first used, it works as intended. All I did was import the Bootstrap scrip tag as a combo and not as a duo:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Edit 2: I've written the following JS fucntion:

      let fade = document.getElementsByClassName('offcanvas-backdrop fade show')
      for(let i = 0; i < fade.length; i++) {
        if(fade.length > 1) {
          fade[i].remove()
        }
      }
    }

This removes the extra fades when you FIRST visit a page. If you go to another page, and then back to the original (where it first had multiple fades to begin with) it just stacks another fade for some reason. Also, when the page is FIRST visited, every other time the button is clicked to open the offcanvas menu, it removes the whole menu and not the fade. I'm assuming the fade and menu are one field. This is frustrating.

Edit 3: I have now redone my JS function. The menu still shows up every other time (except for the initial first page visited), but the fades are now removed properly. If I can figure out how to have the menu show up every time, AND have the fade show once, I will post the solution. For now, here is the JS code:

function removeExtraFade() {
      let fade = document.getElementsByClassName('offcanvas-backdrop fade show')
      for(let i = 0; i < fade.length; i++) {
        while(fade.length > 1) {
          fade[i].remove()
        }
      }
    }

Answer 1

I had a similar issue with 5.2 and found that it was because I had more than on reference linking the bootstrap.css or bootstrap.js.

In my case I had a parent html component/file and it's child html component/file both making up the same page, and both referencing the bootstrap files. Omitting the child html file's reference fixed the issue.

Hope that makes sense and is helpful!

Answer 2

I had similar issue in Angular framework. Imported twice as described before. I have removed bootstrap.min.js from "angular.json > scripts" section

"scripts": ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]

then fixed.

I have also import just required Bootstrap JS classes in my components: import Tooltip from 'bootstrap/js/dist/tooltip';