Bootstrap dropdown導入時の注意点

はじめに

bootstrapのdropdownの表示方法の順序や注意点についてを備忘録として残しておく。

基本的には公式ページに添えばできる

基本的にはweb上にたくさん表示方法が転がっているのだが、個人的には公式ページを読むことをオススメする。

参考ページ

公式ページ　ドロップダウン(日本語)
https://getbootstrap.jp/docs/4.2/components/dropdowns/

公式ページ　ドロップダウン(英語)
https://getbootstrap.com/docs/4.4/components/dropdowns/

バージョンによって記述方法が違う

bootstrap3からbootstrap4へのバージョンが変わると、dropdownだけでなく他の機能の表示記述方法も変わる。以下の記事を参考に、自身の導入したbootstrapのバージョンを再度確認して、記述していくのが良い。

参考ページ

Bootstrap4移行ガイド　ドロップダウン
https://cccabinet.jpn.org/bootstrap4/components/dropdowns

Popper.jsの導入が必要

ドロップダウンはbootstrapのサードパーティライブラリ(Popper.js)に構築され、動的な位置決めとviewport の検出が可能だ。なので、Popper.jsをbootstrap.jsを読み込む前に記述しなければならない(popper.min.jsでも可)。

もしくは、Popper.jsを内部に含む bootstrap.bundle.min.js や bootstrap.bundle.js を使用する。

今ハマっているエラー

ページ遷移後の最初のクリックで、dropdown-itemが表示されない。
二回目のクリックから正常に動く。

ドロップダウン部分

html.haml

            .col-4.text-center.shadow.btn.btn-info.dropdown-toggle#dropdownMenuButton{data: {toggle: "dropdown"}, aria: {haspopup: "true", expanded: "false"}}
              その他
            .col-4.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 "通報する", "#"

検証ツールで見てみると、dropdown-toggleの親要素にshowが付与され、dropダウンの中身が表示されるというjsの動きだろうが、一回目のクリックでは何も起こらず、二回目から動き始める。

こういう場合一番に怪しいと思うのは、turbolinksの有無だが、私のコードはturbolinksをすでに無効にしている。つまり、ページ遷移するたびにjsファイルがきちんと読み込まれる仕組みになっているはず。。。

ググってもこれといった解決策は見つからず、謎は深まるばかり。。

追記(2020/04/03)

解決しました！！
原因:

application.js

//= require jquery
//= require rails-ujs
//= require popper
//= require bootstrap
//= require bootstrap-sprockets

bootstrapとbootstrap-sprocketsを両方reuqireしてしまっていました。

これだと、二回もbootstrapを読み込むことになって、不具合が起こっていたと考えられます。

どちらか片方だけでよかったみたいです。

まだまだ知らないこと多いなあ。

おわりに

この記事を真剣に読んでくださった方ならわかると思うが、ほぼ参考文献に書かれてある内容のコピペだ。だが私はこれが、記事の書き癖をつける第一歩になると信じ、小一時間で書けるような簡単なことからQiitaに書き溜めて行こうと思う。

Done is better than perfect.

マークザッカーバーグの言葉

完璧(読者にとって有益で読みやすく、且つ自身のアウトプットにもなるような記事を書くこと)を目指すより、
まず終わらせる（どんなに簡単な内容で、無益な情報であっても書く）。

終わらせ続けよう。そうして習慣化させていきたい。