fix(modal): change the mouse event to dismiss a modal on backdrop cli…

…ck (#5326)

* fix(modal): change the mouse event to dismiss a modal on backdrop click

Because of the use of a 'click' event to trigger the dismissal of a modal, the target of the event doesn't take into account an eventual movement of the mouse before releasing click (for ex. selection of text), which can lead to unwanted dismissal of the modal.

Closes: #5264

* fix(modal): change the mouse event to dismiss a modal from a directive

Because of the use of a 'click' event to trigger the dismissal of a modal, the target of the event doesn't take into account an eventual movement of the mouse before releasing click (for ex. selection of text), which can lead to unwanted dismissal of the modal.

cypress/integration/modals_page_spec.ts

@@ -44,5 +44,11 @@ describe('Modals demo page test suite', () => {
       modals.isModalEnabled(modals.modalContainer, false);
       modals.isBackdropExist(false);
     });
+
+    it('when user starts to click on body then release click on backdrop then the modal is not closed', () => {
+      modals.clickByText(templateDemo, btnText);
+      modals.startClickOnModalReleaseOnBackdrop(modals.modalContainer);
+      modals.isModalVisible(modals.modalContainerVisible, true);
+    });
   });
 });

cypress/support/modals.po.ts

@@ -6,6 +6,7 @@ export class ModalsPo extends BaseComponent {
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/modal';
 
   modalContainer = 'modal-container';
+  modalContainerVisible = 'modal-container.show';
   modalContent = '.modal-content';
   modalDialog = '.modal-dialog';
   modalBody = '.modal-body';
@@ -77,6 +78,14 @@ export class ModalsPo extends BaseComponent {
     cy.get(`${baseSelector} .modal`).click();
   }
 
+  startClickOnModalReleaseOnBackdrop(baseSelector: string) {
+    cy.get(`${baseSelector} .modal-content`)
+      .trigger('mousedown')
+      .wait(100)
+      .get(this.modalContainer)
+      .trigger('mouseup');
+  }
+
   checkElementsQuantity(elementsSelector: string, expectedQuantity: number) {
     cy.get(elementsSelector).should('have.length', expectedQuantity);
   }

src/modal/modal-container.component.ts

@@ -38,6 +38,7 @@ export class ModalContainerComponent implements OnInit, OnDestroy {
   isAnimated: boolean;
   bsModalService: BsModalService;
   private isModalHiding = false;
+  private clickStartedInContent = false;
 
   constructor(options: ModalOptions,
               protected _element: ElementRef,
@@ -76,13 +77,21 @@ export class ModalContainerComponent implements OnInit, OnDestroy {
     }
   }
 
-  @HostListener('click', ['$event'])
-  onClick(event: MouseEvent): void {
+  @HostListener('mousedown', ['$event'])
+  onClickStarted(event: MouseEvent): void {
+    this.clickStartedInContent = event.target !== this._element.nativeElement;
+  }
+
+  @HostListener('mouseup', ['$event'])
+  onClickStop(event: MouseEvent): void {
+    const clickedInBackdrop = event.target === this._element.nativeElement && !this.clickStartedInContent;
     if (
       this.config.ignoreBackdropClick ||
       this.config.backdrop === 'static' ||
-      event.target !== this._element.nativeElement
+      !clickedInBackdrop
     ) {
+      this.clickStartedInContent = false;
+
       return;
     }
     this.bsModalService.setDismissReason(DISMISS_REASONS.BACKRDOP);

src/modal/modal.directive.ts

@@ -78,6 +78,7 @@ export class ModalDirective implements OnDestroy, OnInit {
   private _backdrop: ComponentLoader<ModalBackdropComponent>;
 
   private isNested = false;
+  private clickStartedInContent = false;
 
   constructor(private _element: ElementRef,
               _viewContainerRef: ViewContainerRef,
@@ -90,13 +91,21 @@ export class ModalDirective implements OnDestroy, OnInit {
     );
   }
 
-  @HostListener('click', ['$event'])
-  onClick(event: MouseEvent): void {
+  @HostListener('mousedown', ['$event'])
+  onClickStarted(event: MouseEvent): void {
+    this.clickStartedInContent = event.target !== this._element.nativeElement;
+  }
+
+  @HostListener('mouseup', ['$event'])
+  onClickStop(event: MouseEvent): void {
+    const clickedInBackdrop = event.target === this._element.nativeElement && !this.clickStartedInContent;
     if (
       this.config.ignoreBackdropClick ||
       this.config.backdrop === 'static' ||
-      event.target !== this._element.nativeElement
+      !clickedInBackdrop
     ) {
+      this.clickStartedInContent = false;
+
       return;
     }
     this.dismissReason = DISMISS_REASONS.BACKRDOP;