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/stimulus@3.0.1
├─ @hotwired/turbo-rails@7.1.3
│ ├─ @hotwired/turbo@^7.1.0
│ └─ @rails/actioncable@^7.0
├─ @hotwired/turbo@7.1.0
├─ @popperjs/core@2.11.5
├─ @rails/actioncable@7.0.3
├─ @rails/actiontext@6.0.5
│ └─ @rails/activestorage@^6.0.0
├─ @rails/activestorage@6.0.5
│ └─ spark-md5@^3.0.0
├─ @rails/request.js@0.0.6
├─ @rails/ujs@6.0.5
├─ anymatch@3.1.2
│ ├─ normalize-path@^3.0.0
│ └─ picomatch@^2.0.4
├─ balanced-match@1.0.2
├─ binary-extensions@2.2.0
├─ bootstrap-icons@1.8.3
├─ bootstrap@5.1.3
├─ brace-expansion@1.1.11
│ ├─ balanced-match@^1.0.0
│ └─ concat-map@0.0.1
├─ braces@3.0.2
│ └─ fill-range@^7.0.1
├─ chokidar@3.5.3
│ ├─ 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
├─ concat-map@0.0.1
├─ esbuild-android-64@0.14.48
├─ esbuild-android-arm64@0.14.48
├─ esbuild-darwin-64@0.14.48
├─ esbuild-darwin-arm64@0.14.48
├─ esbuild-freebsd-64@0.14.48
├─ esbuild-freebsd-arm64@0.14.48
├─ esbuild-linux-32@0.14.48
├─ esbuild-linux-64@0.14.48
├─ esbuild-linux-arm@0.14.48
├─ esbuild-linux-arm64@0.14.48
├─ esbuild-linux-mips64le@0.14.48
├─ esbuild-linux-ppc64le@0.14.48
├─ esbuild-linux-riscv64@0.14.48
├─ esbuild-linux-s390x@0.14.48
├─ esbuild-netbsd-64@0.14.48
├─ esbuild-openbsd-64@0.14.48
├─ esbuild-rails@1.0.3
│ └─ glob@^7.2.0
├─ esbuild-sunos-64@0.14.48
├─ esbuild-windows-32@0.14.48
├─ esbuild-windows-64@0.14.48
├─ esbuild-windows-arm64@0.14.48
├─ esbuild@0.14.48
│ ├─ esbuild-android-64@0.14.48
│ ├─ esbuild-android-arm64@0.14.48
│ ├─ esbuild-darwin-64@0.14.48
│ ├─ esbuild-darwin-arm64@0.14.48
│ ├─ esbuild-freebsd-64@0.14.48
│ ├─ esbuild-freebsd-arm64@0.14.48
│ ├─ esbuild-linux-32@0.14.48
│ ├─ esbuild-linux-64@0.14.48
│ ├─ esbuild-linux-arm@0.14.48
│ ├─ esbuild-linux-arm64@0.14.48
│ ├─ esbuild-linux-mips64le@0.14.48
│ ├─ esbuild-linux-ppc64le@0.14.48
│ ├─ esbuild-linux-riscv64@0.14.48
│ ├─ esbuild-linux-s390x@0.14.48
│ ├─ esbuild-netbsd-64@0.14.48
│ ├─ esbuild-openbsd-64@0.14.48
│ ├─ esbuild-sunos-64@0.14.48
│ ├─ esbuild-windows-32@0.14.48
│ ├─ esbuild-windows-64@0.14.48
│ └─ esbuild-windows-arm64@0.14.48
├─ fill-range@7.0.1
│ └─ to-regex-range@^5.0.1
├─ fs.realpath@1.0.0
├─ fsevents@2.3.2
├─ glob-parent@5.1.2
│ └─ is-glob@^4.0.1
├─ glob@7.2.3
│ ├─ 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
├─ hotkeys-js@3.9.4
├─ immutable@4.1.0
├─ inflight@1.0.6
│ ├─ once@^1.3.0
│ └─ wrappy@1
├─ inherits@2.0.4
├─ is-binary-path@2.1.0
│ └─ binary-extensions@^2.0.0
├─ is-extglob@2.1.1
├─ is-glob@4.0.3
│ └─ is-extglob@^2.1.1
├─ is-number@7.0.0
├─ local-time@2.1.0
├─ lodash.debounce@4.0.8
├─ lodash@4.17.21
├─ minimatch@3.1.2
│ └─ brace-expansion@^1.1.7
├─ normalize-path@3.0.0
├─ once@1.4.0
│ └─ wrappy@1
├─ path-is-absolute@1.0.1
├─ picomatch@2.3.1
├─ readdirp@3.6.0
│ └─ picomatch@^2.2.1
├─ sass@1.53.0
│ ├─ chokidar@>=3.0.0 <4.0.0
│ ├─ immutable@^4.0.0
│ └─ source-map-js@>=0.6.2 <2.0.0
├─ source-map-js@1.0.2
├─ spark-md5@3.0.2
├─ stimulus-clipboard@3.2.0
├─ stimulus-notification@2.0.0
│ └─ stimulus-use@^0.50.0-2
├─ stimulus-rails-autosave@4.0.0
│ └─ lodash.debounce@^4.0.8
├─ stimulus-use@0.50.0
│ └─ hotkeys-js@>=3
├─ to-regex-range@5.0.1
│ └─ is-number@^7.0.0
├─ trix@2.0.0-beta.0
└─ wrappy@1.0.2
