fix(popover): allow closeOnClickOutside and manual trigger for modal (#…

…62)
allianz · Oct 13, 2020 · 8684d31 · 8684d31
1 parent 1bafd2e
commit 8684d31
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/projects/ng-aquila/src/popover/popover-trigger.directive.spec.ts b/projects/ng-aquila/src/popover/popover-trigger.directive.spec.ts
@@ -46,7 +46,7 @@ describe('NxPopoverTriggerDirective', () => {
     testInstance = fixture.componentInstance;
     popoverInstance = testInstance.popoverInstance;
     triggerInstance = testInstance.triggerInstance;
-    buttonNativeElement = <HTMLButtonElement>fixture.nativeElement.querySelector('button');
+    buttonNativeElement = (fixture.nativeElement.querySelector('button') as HTMLButtonElement);
   }
 
   beforeEach(async(() => {
@@ -252,13 +252,16 @@ describe('NxPopoverTriggerDirective', () => {
       expect(getPopoverContent()).toBeFalsy();
     }));
 
-    it('should behave correctly if closeOnClickOutside is toggled', fakeAsync(() => {
+    it('should close on backdrop click if closeOnClickOutside is set to true', fakeAsync(() => {
       createTestComponent(ClickOnDocument);
       click();
       document.dispatchEvent(new MouseEvent('click'));
       fixture.detectChanges();
       expect(getPopoverContent()).toBeFalsy();
+    }));
 
+    it('should not close on backdrop click if closeOnClickOutside is set to false', fakeAsync(() => {
+      createTestComponent(ClickOnDocument);
       (testInstance as ClickOnDocument).closable = false;
       fixture.detectChanges();
 
@@ -374,6 +377,28 @@ describe('NxPopoverTriggerDirective', () => {
       expect(spy).toHaveBeenCalled();
       subscription.unsubscribe();
     }));
+
+    it('should behave correctly if closeOnClickOutside is set to true', fakeAsync(() => {
+      createTestComponent(ModalPopover);
+      click();
+      const backdrop = getBackdrop();
+      backdrop.click();
+      flush();
+      expect(getPopoverContent()).toBeFalsy();
+    }));
+
+    it('should behave correctly if closeOnClickOutside is set to false', fakeAsync(() => {
+      createTestComponent(ModalPopover);
+
+      (testInstance as ClickOnDocument).closable = false;
+      fixture.detectChanges();
+
+      click();
+      const backdrop = getBackdrop();
+      backdrop.click();
+      flush();
+      expect(getPopoverContent()).toBeTruthy();
+    }));
   });
 
   describe('show change event emission', () => {
@@ -617,15 +642,22 @@ class PopoverFallBackComponent extends PopoverTest {
 @Component({
   template: `
     <div>
-      <button [nxPopoverTriggerFor]="popoverHover" nxPopoverDirection="right" nxPopoverTrigger="click"
-      [nxPopoverCloseable]="false" [nxPopoverModal]="true">Hover
+      <button
+          [nxPopoverTriggerFor]="popoverHover"
+          nxPopoverDirection="right"
+          nxPopoverTrigger="click"
+          [nxPopoverCloseable]="false"
+          [closeOnClickOutside]="closable"
+          [nxPopoverModal]="true">Hover
       </button>
     </div>
 
     <nx-popover #popoverHover>
     </nx-popover>`
 })
-class ModalPopover extends PopoverTest { }
+class ModalPopover extends PopoverTest {
+  closable = true;
+}
 
 @Component({
   template: `

diff --git a/projects/ng-aquila/src/popover/popover-trigger.directive.ts b/projects/ng-aquila/src/popover/popover-trigger.directive.ts
@@ -301,7 +301,7 @@ export class NxPopoverTriggerDirective implements AfterViewInit, OnDestroy, OnIn
       this._autoFocusFirstTabbableElement(element);
 
       // attach a close click listener only if it makes sense (ignore it on hover e.g.)
-      if (this.shouldReactOnClickOutside()) {
+      if (this.closeOnClickOutside) {
         this.waitForClose();
       }
     }
@@ -321,10 +321,6 @@ export class NxPopoverTriggerDirective implements AfterViewInit, OnDestroy, OnIn
     });
   }
 
-  private shouldReactOnClickOutside() {
-    return (!this._modal && this.closeOnClickOutside);
-  }
-
   // detaches the overlay
   // we are listening to the detachments observable which will then emit the nxClosed event
   // on the popover component
@@ -352,15 +348,15 @@ export class NxPopoverTriggerDirective implements AfterViewInit, OnDestroy, OnIn
 
       overlayState.scrollStrategy.enable();
 
-      if (this._modal && this.trigger === 'click') {
+      if (this._modal) {
         overlayState.hasBackdrop = true;
       }
 
       this.overlayRef = this.overlay.create(overlayState);
       this.subscribeToPositions(overlayState.positionStrategy as FlexibleConnectedPositionStrategy);
       this._subscribeToAttach();
       this._subscribeToDetach();
-      if (this._modal) {
+      if (this._modal && this._closeOnClickOutside) {
         this._subscribeToBackdropClick();
       }
     }