Bootstrap 5 with Angular 12 : bootstrap (navbar, dropdown) interactions are blocked after get/create bootstrap instances by JavaScript

Question

Everything (navbar, dropdown) works fine until I try to get/create bootstrap instances in the .ts files. When I insert the get/create instance js code I can't collapse the nav-menu after I expanded and the dropdown is not working either!

Here is the source code on stackblitz

If you are commenting out the following code part, everything works fine!

 var modal = new Modal('#updatePwaModal');
 modal.show();

Answer 1

I found the solution that is answered in another question where the dropdown is broken when a modal instance is created. In my case, the dropdown and also the navbar was broken!

Instead of the

import { Modal } from 'bootstrap';

needed

import { Modal } from 'bootstrap/js/dist/modal';

Answer 2

If somebody still suffers from this - above solution did not helped for me - but this one did:

import Modal from 'bootstrap/js/dist/modal'

The only change is deleting curly braces from the statement. I'm using vue 3 composition api - maybe that is where the difference comes from.