Merge pull request #15437 from RogueTea/DynamicDialog-Closable-is-false

DynamicDialog: closeOnEscape and dismissableMask not working in combination with closable=false
primefaces · May 3, 2024 · 18c05de · 18c05de
2 parents 34e0c9e + 6772560
commit 18c05de
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 9 deletions.
diff --git a/src/app/components/dynamicdialog/dynamicdialog.spec.ts b/src/app/components/dynamicdialog/dynamicdialog.spec.ts
@@ -31,6 +31,24 @@ export class TestDynamicDialogComponent {
         });
     }
 }
+@Component({
+    template: ` <div class="TestDynamicDialogClosableFalse"></div> `
+})
+export class TestDynamicDialogWithClosableFalseComponent {
+    constructor(public dialogService: DialogService) {}
+
+    show() {
+        this.dialogService.open(TestComponent, {
+            header: 'Demo Header',
+            width: '70%',
+            contentStyle: { 'max-height': '350px', overflow: 'auto' },
+            closable: false,
+            closeOnEscape: true,
+            dismissableMask: true,
+            baseZIndex: 0
+        });
+    }
+}
 @NgModule({
     imports: [CommonModule, DynamicDialogModule],
     declarations: [TestComponent, TestDynamicDialogComponent],
@@ -39,20 +57,20 @@ export class TestDynamicDialogComponent {
 })
 export class FakeTestDialogModule {}
 
-describe('DynamicDialog', () => {
-    let fixture: ComponentFixture<TestDynamicDialogComponent>;
-    let testDynamicDialogComponent: TestDynamicDialogComponent;
-
+fdescribe('DynamicDialog', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [NoopAnimationsModule, FakeTestDialogModule],
             declarations: [Footer]
         });
-        fixture = TestBed.createComponent(TestDynamicDialogComponent);
-        testDynamicDialogComponent = fixture.debugElement.componentInstance;
     });
 
     it('should open dialog and close dialog', fakeAsync(() => {
+        let fixture: ComponentFixture<TestDynamicDialogComponent>;
+        let testDynamicDialogComponent: TestDynamicDialogComponent;
+
+        fixture = TestBed.createComponent(TestDynamicDialogComponent);
+        testDynamicDialogComponent = fixture.debugElement.componentInstance;
         fixture.detectChanges();
 
         testDynamicDialogComponent.show();
@@ -74,4 +92,31 @@ describe('DynamicDialog', () => {
         expect(dynamicDialogEl).toBeUndefined();
         flush();
     }));
+
+    it('should open dialog and close dialog without the closing icon enabled', fakeAsync(() => {
+        let fixture: ComponentFixture<TestDynamicDialogWithClosableFalseComponent>;
+        let testDynamicDialogComponent: TestDynamicDialogWithClosableFalseComponent;
+        fixture = TestBed.createComponent(TestDynamicDialogComponent);
+        testDynamicDialogComponent = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+
+        testDynamicDialogComponent.show();
+        fixture.detectChanges();
+        tick(300);
+
+        let dynamicDialogEl = document.getElementsByClassName('p-dynamic-dialog')[0];
+        expect(dynamicDialogEl).toBeTruthy();
+        const titleEl = dynamicDialogEl.getElementsByClassName('p-dialog-title')[0];
+        const testComponentHeader = dynamicDialogEl.getElementsByTagName('h2')[0];
+        expect(titleEl.textContent).toEqual('Demo Header');
+        expect(testComponentHeader.textContent).toEqual('PrimeNG ROCKS!');
+        const backdropEl = document.getElementsByClassName('p-dialog-mask')[0];
+        backdropEl.dispatchEvent(new Event('mousedown'));
+        fixture.detectChanges();
+        tick(700);
+
+        dynamicDialogEl = document.getElementsByClassName('p-dynamic-dialog')[0];
+        expect(dynamicDialogEl).toBeUndefined();
+        flush();
+    }));
 });
diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts
@@ -400,7 +400,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
     }
 
     enableModality() {
-        if (this.config.closable !== false && this.config.dismissableMask) {
+        if (this.config.dismissableMask) {
             this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event: any) => {
                 if (this.wrapper && this.wrapper.isSameNode(event.target)) {
                     this.hide();
@@ -636,7 +636,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
     }
 
     bindGlobalListeners() {
-        if (this.config.closeOnEscape !== false && this.config.closable !== false) {
+        if (this.config.closeOnEscape !== false) {
             this.bindDocumentEscapeListener();
         }
 

diff --git a/src/app/showcase/doc/dynamicdialog/exampledoc.ts b/src/app/showcase/doc/dynamicdialog/exampledoc.ts
@@ -311,4 +311,4 @@ export class Footer {
 }`
         }
     ];
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -311,4 +311,4 @@ export class Footer { @@
     }`
             }
         ];
-    }
+    }