Rails 7 Bootstrap Dropdown is adding # to url

875 Views Asked by At

I have the most frustrating issue on my rails 7 app. None of my bootstrap drop downs(dropdown buttons or dropdown nav) will work, they add a hash to my url.

I am using the jumpstart template https://github.com/excid3/jumpstart

For instance when I click the drop down in my nav menu it adds a hash to the url and the dropdown wont open.

<li class="nav-item dropdown">
 <%= link_to "#", id: "navbar-dropdown", class: "nav-link text-dark dropdown-toggle", data: { turbo: "false", target: "nav-account-dropdown", bs_toggle: "dropdown" }, aria: { haspopup: true, expanded: false } do %>
  <%= image_tag avatar_path(current_user, size: 40), height: 20, width: 20, class: "rounded" %>
 <% end %>
 <div id="nav-account-dropdown" class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-dropdown">
  <%= link_to "Settings", edit_user_registration_path, class: "dropdown-item" %>
    <% if current_user.admin? && respond_to?(:madmin_root_path) %>
    <div class="dropdown-divider"></div>
    <%= link_to "Admin Area", madmin_root_path, class: "dropdown-item" %>
    <% end %>
    <div class="dropdown-divider"></div>
    <%= button_to "Logout", destroy_user_session_path, method: :delete, class: "dropdown-item" %>
     </div>
 </li>

My application.js

import "@hotwired/turbo-rails"
require("@rails/activestorage").start()
import "trix"
import "@rails/actiontext"
require("local-time").start()
require("@rails/ujs").start()

import './channels/**/*_channel.js'
import "./controllers"
import Rails from '@rails/ujs'
Rails.start()
import * as bootstrap from "bootstrap"

document.addEventListener("turbo:load", () => {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })

  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })

  var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
  var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
    return new bootstrap.Dropdown(dropdownToggleEl)
  })
})

I added

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
      var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
        return new bootstrap.Dropdown(dropdownToggleEl)
      })

as a work around, but it made no difference.

here is a gif showing what i see when testing, no errors appear in console

https://share.cleanshot.com/UmpcTVppoMQskAIWIpsm

gemfile

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.0.3"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.3"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end
gem "cssbundling-rails"
gem 'devise', '~> 4.8', '>= 4.8.1'
gem 'devise_invitable', '~> 2.0.0'
gem "friendly_id", "~> 5.4"
gem "jsbundling-rails"
gem "madmin"
gem "name_of_person", "~> 1.1"
gem "noticed", "~> 1.4"
gem "pretender", "~> 0.3.4"
gem "pundit", "~> 2.1"
gem "sidekiq", "~> 6.2"
gem "sitemap_generator", "~> 6.1"
gem "whenever", require: false
gem "responders", github: "heartcombo/responders", branch: "main"
gem "simple_calendar", "~> 2.4"
gem "acts_as_list", "~> 1.0"
gem 'pagy', '~> 5.10'
gem 'pg_search', '~> 2.3', '>= 2.3.6'
gem "pay", "~> 3.0"
gem "google-api-client", require: "google/apis/calendar_v3"
gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.1'
gem 'omniauth-google-oauth2', '~> 1.0', '>= 1.0.1'


# To use Stripe, also include:
gem "stripe", "~> 6.0"

yarn list

yarn list v1.22.18
├─ @hotwired/[email protected]
├─ @hotwired/[email protected]
│  ├─ @hotwired/turbo@^7.1.0
│  └─ @rails/actioncable@^7.0
├─ @hotwired/[email protected]
├─ @popperjs/[email protected]
├─ @rails/[email protected]
├─ @rails/[email protected]
│  └─ @rails/activestorage@^6.0.0
├─ @rails/[email protected]
│  └─ spark-md5@^3.0.0
├─ @rails/[email protected]
├─ @rails/[email protected]
├─ [email protected]
│  ├─ normalize-path@^3.0.0
│  └─ picomatch@^2.0.4
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ balanced-match@^1.0.0
│  └─ [email protected]
├─ [email protected]
│  └─ fill-range@^7.0.1
├─ [email protected]
│  ├─ anymatch@~3.1.2
│  ├─ braces@~3.0.2
│  ├─ fsevents@~2.3.2
│  ├─ glob-parent@~5.1.2
│  ├─ is-binary-path@~2.1.0
│  ├─ is-glob@~4.0.1
│  ├─ normalize-path@~3.0.0
│  └─ readdirp@~3.6.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ glob@^7.2.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  └─ [email protected]
├─ [email protected]
│  └─ to-regex-range@^5.0.1
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ is-glob@^4.0.1
├─ [email protected]
│  ├─ fs.realpath@^1.0.0
│  ├─ inflight@^1.0.4
│  ├─ inherits@2
│  ├─ minimatch@^3.1.1
│  ├─ once@^1.3.0
│  └─ path-is-absolute@^1.0.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ once@^1.3.0
│  └─ wrappy@1
├─ [email protected]
├─ [email protected]
│  └─ binary-extensions@^2.0.0
├─ [email protected]
├─ [email protected]
│  └─ is-extglob@^2.1.1
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ brace-expansion@^1.1.7
├─ [email protected]
├─ [email protected]
│  └─ wrappy@1
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ picomatch@^2.2.1
├─ [email protected]
│  ├─ chokidar@>=3.0.0 <4.0.0
│  ├─ immutable@^4.0.0
│  └─ source-map-js@>=0.6.2 <2.0.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ stimulus-use@^0.50.0-2
├─ [email protected]
│  └─ lodash.debounce@^4.0.8
├─ [email protected]
│  └─ hotkeys-js@>=3
├─ [email protected]
│  └─ is-number@^7.0.0
├─ [email protected]
└─ [email protected]
0

There are 0 best solutions below