-1

I'm working on an angular project (angular 13) and i was using bootstrap 4. I'm currently working on the bootstrap 5 migration and i have a blocking problem with my collapse comportments.
When i click on my collapse trigger, this is opening it, but when i click it again, and again, the collapse, never close, at the contrary, everytime i click, it starts again the opening animation.
I got no error in the developer console and everything else is working fine (including the popovers that are also using popper.js).
Here is approximatly what i did for my bootstrap 5 migration :

  • Upgrading the bootstrap version
  • Installing @popperjs/core (version 2.11.4)
  • Adding "node_modules/@popperjs/core/dist/umd/popper.min.js" in the scripts of my angular.json file

Does anyone have already face this problem ? Does anyone have an idea to fix it ?

Thanks by advance for your answers

EDIT : Here is an example of my code but i got the issue two when i clip paste the boostrap 5 documentation examples

<a data-bs-toggle="collapse" href="#dropdownWhatIsIt" role="button" aria-expanded="false" aria-controls="dropdownWhatIsIt" class="use-it-description-button">
    <span [innerHTML]="'post.actions.adaptive-reuse' | translate: {buttonName: adaptiveReuseLabel }"></span>
    <i class="fas fa-angle-down use-it-description-button margin-left-7"></i>
  </a>
  <div class="collapse" id="dropdownWhatIsIt">
    <div [innerHTML]="getAdaptiveReuseExplanation"></div>
  </div>
Benoit Bonavia
  • 53
  • 2
  • 9

1 Answers1

0

I found a solution, i had to remove every scripts bootstrap and jquery from the angular.json
All what's needed are the @popperjs/core scripts
Now my collapse is correctly closing (i still have a little css problem but the comportment is ok)

Benoit Bonavia
  • 53
  • 2
  • 9