Dropdown menu with Bootstrap 4 only drops once in Rails

Question

I recently updated to Bootstrap 4.0.0, I'm running Rails 5.1.5 and I installed BS as specified in the README in their github.

Furthermore it's been added to package.json for yarn.

In gemfile : gem 'bootstrap', '~> 4.0' gem 'jquery-rails'

In package.json : "bootstrap": "^4.0.0", "popper.js": "^1.12.9", "jquery": "^3.3.0"

I set it in my application.scss : @import "bootstrap";

My app/assets/javascripts/application.js:

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .

Now I trying a basic exemple from an online doc :

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        About Us
    </button>
    <div class="dropdown-menu" aria-labelledby="about-us">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
    </div>
</div>

The problem is that when I click the button, the menu appears, but if I click again it doesn't goes back, and after that I can't click it anymore, it's like frozen.

Answer 1

I just added

$(document).ready(function() { $(".dropdown-toggle").dropdown(); })

in a random js file, and it works fine at the first click