Bootstrap dropdown not opening first click on React 16

Question

Using the following: Bootstrap 4.0.0-beta.2, popper.js 1.13.0, and React 16.0.0. I have multiple dropdown buttons in my React app and on first clicks they don't open. After the first click they work as expected and open and close on first click. Any ideas?

<div className="dropdown">
    <button type="button" className="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
    <div className="dropdown-menu dropdown-menu-right">
        <Link role="button" className="dropdown-item text-sm" to={path1}>Click me</Link>
        <Link role="button" className="dropdown-item text-sm" to={path2}>Click me</Link>
        <Link role="button" className="dropdown-item text-sm" to={path3}>Click me</Link>
    </div>
</div>

This is how I load in app.jsx

//load bootstrap and app css
import Popper from 'popper.js';
window.Popper = Popper;
import 'bootstrap';
import 'style-loader!css-loader!sass-loader!applicationStyles';

and this is how I load bootstrap, jQuery and popper.js in my webpack.config.js file

entry: [
    'script-loader!jquery/dist/jquery.min.js',
    'script-loader!popper.js/dist/umd/popper.min.js',
    'script-loader!bootstrap/dist/js/bootstrap.min.js',
    'babel-polyfill',
    './app/app.jsx',
],
externals: {
    jQuery: 'jQuery'
},
plugins: [
    // new BundleAnalyzerPlugin(),
    new webpack.ProvidePlugin({
        '$': 'jQuery',
        'jQuery': 'jQuery',
        Popper: ['popper.js', 'default'],
    }),

I tried adding $('.dropdown-toggle').dropdown() to the onClick and that didn't work either

Solution Turns out I had loaded Bootstrap twice using both the entry in webpack.config.js file and the import 'bootstrap' statement in app.jsx so I commented out import 'bootstrap' and it works

Answer 1

You may have jQuery or Bootstrap included twice. I don't use React, but I was having the same problem with Angular. It turns out that I was including jQuery/Bootstrap in my index.html as well my "scripts" configuration (which I think would be your "entry").

Answer 2

I got the same issue. I noticed that when i was using bootstrap.min.js and jquery.min.js at a same time. Then my dropdown takes two click for toggle in first time after page load. Then i commented bootstrap.min.js. Now it is not giving me this issue. Try this. Maybe it will solve your problem.

Answer 3

You should import this line and Test again :

import 'bootstrap/dist/js/bootstrap.bundle';

this work for me like a charm :)

Answer 4

In my case the problem was: i had both libraries at same time

bootstrap and bootstrap.bundle

i just left bootstrap.bundle and it's working.

thanks

Answer 5

I came across the same issue recently, I solved it by writing custom script:

<div class="filter-dropdown text-right">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
  <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Link 1</a>
     <a class="dropdown-item" href="#">Link 2</a>
     <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>



$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) { 
    e.preventDefault();
    $(this).parent().addClass("show");
    $(this).attr("aria-expanded", "true");
    $(this).next().addClass("show"); 
  });