Bugs in showing Modal

[hkb1990]

HTML part:

<button type="button" class="btn btn-primary" (click)="Test()">Start Test</button>
<div bsModal #smModal="bs-modal" [config]="{backdrop: false}"
 class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="Stop()">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Small modal</h4>
      </div>
      <div class="modal-body">
        Count:{{cnt}}
      </div>
    </div>
  </div>
</div>

JS part:

@ViewChild('smModal') public smModal;
public cnt: number = 0;
public timer = null;

Test() {
  let _this = this;
  this.timer = setInterval(function() { _this.cnt++; _this.smModal.show(); }, 200);
}

Stop(){
  if(this.timer){
    clearInterval(this.timer);
    this.timer = null;
  }
  this.smModal.hide();
}

1. Add above code to any component and start the server.
2. Click Start Test button, a small modal will show.
3. Click anywhere at the window, the small modal will hide, but never show again.
4. Change the config of smModal to {backdrop: true}, and run server again.
5. Repeat step 2 and 3, we will find several backdrops have been added.

This case comes from a situation that I want to show a modal when a message comes in, but when several messages comes in rapidly in a short time, above bugs occur.

[hkb1990]

Setting isAnimated to false could solve this problem temporarily. But there seems no option to turn it off.