Dropdown doesn't work after modal of Bootstrap imported

Question

I have a header with dropdown-menu. If I click, I will see the menu. All work perfectly. Here is the HTML:

Another page I had import modal from bootstrap and nothing happens when I click on the dropdown. In the console it doesn't show any errors, but I don't know why, I have 2 events:

If I remove my import from Js. file, it will work perfectly:

import { Modal } from 'bootstrap';

app.js

const bootstrap = require('bootstrap/dist/js/bootstrap.bundle');

contact.js

import { Modal } from 'bootstrap';


window.addEventListener("DOMContentLoaded", () => {
if (document.getElementById('emailHasBeenSent') !== null && document.getElementById('emailHasBeenSent').value) {
    const modal = new Modal(document.getElementById('contactUsModal')),
        closeModalBtn = document.querySelector('.contact--modal-close-btn');

    modal.show();

    closeModalBtn.addEventListener('click', e => {
        modal.hide();
    })
}});

Modal of Bootstrap seems to "cancel" onClick event dropdown. The class name stay on "btn dropdown-toggle" and not "btn dropdown-toggle show". Could you help me to find where is the problem.

Answer 1

I had a similar problem. Importing straight from 'bootstrap' causes the dropdown listeners to disappear.

Fixed it by using deeper import: import Modal from 'bootstrap/js/dist/modal';

Goes to category: I dont know why but it works.

Answer 2

i had a same problem. I had loaded bootstrap twice inside another file that comes from xmlHttpRequest. may by you had a same mistake