bootstrapのdropdown-menuがbodyをクリックしても閉じない件について。

Question

ヘッダーにドロップダウンバーを実装し、クリックするとドロップダウンメニューが出ます。
しかし、モバイル操作時にドロップダウンメニューを出すと通常は追加されるdropdown-backdropが追加されないため、ドロップダウンメニューの箇所以外をクリックしてもドロップダウンメニューがなくなりません。

●_header_smart_phone.html.haml

            %li.dropdown1
              %a.dropdown-toggle.nav-character(href="#" data-toggle="dropdown")
                - if current_user.profile_image.present?
                  %span.article-thumb-image1.crop-image{style: "background-image:url('#{current_user.profile_image.url}')"}
                - else
                  %i.far.fa-smile.profile_no_image1
              %ul.dropdown-menu.right1
                %li= link_to '<i class="far fa-user user-profile"></i>&nbsp;&nbsp;&nbsp;&nbsp;プロフィール'.html_safe, user_path(current_user)
                %li= link_to '<i class="fas fa-cog cog"></i>&nbsp;&nbsp;&nbsp;&nbsp;設定'.html_safe, edit_user_registration_path(current_user)
                %li= link_to '<i class="fas fa-sign-out-alt sign-out"></i>&nbsp;&nbsp;&nbsp;&nbsp;ログアウト'.html_safe, destroy_user_session_path, method: :delete

なお、ヘッダーではなく、他の箇所（削除ボタン）にもドロップダウンバーを実装しているのですが、その箇所はドロップダウンメニューを出した場合、ちゃんとdropdown-backdropが追加されています。

もし、お分かりになる方がいらっしゃいましたら、教えて頂ければ幸いです。
また、jqueryなどを使ってdropdown-backdrop以外のやり方でdropdown-menuを閉じるやり方を知っている方がいらっしゃいましたら教えて頂ければと思います。