Bootstrapのdropdownの不具合

Question

前提・実現したいこと

rails でアプリ開発中、Bootstrapでdropdownをつけたのだが、ページ遷移後の最初のクリックで、dropdown-itemが表示されない。

二回目のクリックからは正常に動く。

該当のソースコード

ユーザーページのhtmlファイルです。

　　　　　　　.col-4.text-center.shadow.btn.btn-info.dropdown-toggle#dropdownMenuButton{data: {toggle: "dropdown"}, aria: {haspopup: "true", expanded: "false"}}
              その他
            .dropdown-menu.dropdown-menu-right{aria: {labelledby: "dropdownMenuButton"}}
              - if user_signed_in? && @user.id == current_user.id
                .text-decoration-none.dropdown-item= link_to "情報編集", edit_user_registration_path(@user)
              - else
                .text-decoration-none.dropdown-item= link_to "ダイレクトメッセージ", "#"
              - if user_signed_in? && @user.id == current_user.id
                .text-decoration-none.dropdown-item= link_to "ログアウト", destroy_user_session_path, method: :delete
              - else
                .text-decoration-none.dropdown-item= link_to "通報する", "#"

application.html.haml ヘッド部分

%head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Moyoshi
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = stylesheet_link_tag    "https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"
    = javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    
  %body
  以下省略

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require rails-ujs
//= require popper
//= require bootstrap-sprockets
//= require bootstrap
//= require activestorage
//= require bootstrap-tagsinput

//= require_tree .

試したこと

popper.jsの有無の確認と、読み込む順番の変更をしてみたが、変化なし。

turbolinksは消しています。

補足情報（FW/ツールのバージョンなど）

ruby 2.5.1p57
rails 5.2.4.2
jquery-rails 4.3.5
bootstrap 4.4.1
popper_js 1.16.0

Answer 1

HTMLの構造を確認すると良いかもしれません。
公式を見ると<div class="dropdown">〜</div>が必要なようです。

公式：https://getbootstrap.jp/docs/4.3/components/dropdowns/#single-button

参考：https://pisuke-code.com/bootstrap-why-not-work-dropdown/

---

追記

確認事項①
公式を見ると必要なapplication.jsに必要な設定は下記のようですので、必要ないもの（bootstrap-sprockets）は削除し下記の順番通りにしてください。

//= require jquery3
//= require popper
//= require bootstrap

https://github.com/twbs/bootstrap-rubygem

確認事項②
hamlやslimなどを利用しているとタブの間違いの可能性があるかと思います。
実行環境でChromeの「ページのソースを表示」または「検証」で正しくHTML構造がbootstrap公式通りになっているか確認してみてください。

Comments

[SomaSekimoto]

返信ありがとうございます！！

上記のページを参考に、dropdownクラスを追加してみましたが、変化なしでした。また、popper.jsをapplication.html.hamlに追記もしてみたのですが変わらずです。

[no1knows]

> popper.jsをapplication.html.hamlに追記
は基本的に必要ないはずです。追記しましたので確認をお願いします。

[SomaSekimoto]

application.js以下のようにしたら、上手く動作しました！！bootstrap-sprocketsはいらないんですね。その辺全く知らなかったです。。

解決していただき、ありがとうございます！！

[no1knows]

できる限り公式を見る癖をつけると色々と捗るかと思います。
解決してよかったです！