Primeng: DynamicDialog and Dialog Closed by clear button on drop down or chips inside

[junyuan]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/edit/primeng-dynamicdialog-dropdown-issue

Current behavior
If there is a drop down with showClear=true inside opened dynamic dialog. click of clear buton on the drop down will close the dynamic dialog as well.

Expected behavior
This is not happen in previous 8. I have to set closeable=false on dyanmic dialog open parameters to prevent this. looks like the dynamic dialog catch the click event from the drop down clear button and treat it as the close button of dynamic dialog.

Please tell us about your environment:
Stakblitz

• Angular version: 9.0.4
  

• PrimeNG version: 9.1.0
  

• Browser: [Chrome 83]
  

• Language: [TypeScript 3.8.3]

• Node (for AoT issues): node --version = v10.16.3

[Ravatsaas]

I was just about to post this.

Additional info: Consider this section of code in the dialog component:

    enableModality() {
        if (this.closable && this.dismissableMask) {
            this.maskClickListener = this.renderer.listen(this.wrapper, 'click', (event) => {
                if (!this.container.isSameNode(event.target) && !this.container.contains(event.target)) {
                    this.close(event);
                }
            });
        }
        if (this.modal) {
            DomHandler.addClass(document.body, 'ui-overflow-hidden');
        }
    }

Based on my debugging, I believe the call to this.container.contains returns false, because clicking on the clear icon causes angular to remove it before this code runs.

[evandouglas]

I am seeing this issue as well

[MikeMKH]

Same here. Any work around?

[Ravatsaas]

Here's a quick-and-dirty work-around.

EDITED based on the fix checked in by @yigitfindikli

I've tested it only with Angular 9.1.0, and I actually only tested the Dialog component. I included DynamicDialog for completeness.

Create a file named 'fix-primeng-dropdown-clear.ts' with this content:

/* 
Fix for bug that causes primeng dialogs to close when clearing a dropdown inside.

https://github.com/primefaces/primeng/issues/8934

Once fixed, this file can be removed.
*/

import { Dialog } from 'primeng/dialog'
import { DynamicDialogComponent } from 'primeng/dynamicdialog'
import { DomHandler } from 'primeng/dom';

Dialog.prototype.enableModality = function() {

    if (this.closable && this.dismissableMask) {
        this.maskClickListener = this.renderer.listen(this.wrapper, 'click', (event: any) => {
            if (this.wrapper && this.wrapper.isSameNode(event.target)) {
                this.close(event);
            }
        });
    }

    if (this.modal) {
        DomHandler.addClass(document.body, 'ui-overflow-hidden');
    }
}

DynamicDialogComponent.prototype.enableModality = function() {
    if (this.config.closable !== false && this.config.dismissableMask !== false) {
        this.maskClickListener = this.renderer.listen(this.wrapper, 'click', (event: any) => {
            if (this.wrapper && this.wrapper.isSameNode(event.target)) {
                this.close();
            }
        });
    }
    if (this.config.modal !== false) {
        DomHandler.addClass(document.body, 'ui-overflow-hidden');
    }
}

Import it in app.module.ts:

import './fix-primeng-dropdown-clear'

You may need to customize that import statement based on file location.

[junyuan]

This is not only happened on drop down inside. but also the chips. I have update the stackblitz sample to add a chips, the clear button on chips will close the dialog as well.

[ZVARKO]

@yigitfindikli there are more issues with dynamic dialog on version 9.1. Will this fix also work for these issues?
https://github.com/primefaces/primeng/issues/8784
https://github.com/primefaces/primeng/issues/8891

[yigitfindikli]

@ZVARKO Not for the #8891 but it fixed another commit.

[franciscoghansen]

The issue happens also with the calendar component with showButtonBar=true... When I click on the clear button of the calendar overlay, the dialog closes.

[Ravatsaas]

The issue happens also with the calendar component with showButtonBar=true... When I click on the clear button of the calendar overlay, the dialog closes.

I think the fix for this issue will also address the calendar clear button. So should my workaround above.