I have a dialog box that accepts user input and runs a function on closing of the dialog box. Using primeng dynamic dialog component. This function is called during the onClose event. This works fine with a close button.

I have dispossable mask on to allow user to close box by clicking outside of it. Here the onClose event doesnt fire. Is there any way to capture the event where user clicks outside the box or to make onClose fire?

https://www.primefaces.org/primeng/dynamicdialog

component 1

addQuoteDialog() {
    let selectedData = this.gridApi.getSelectedRows();

    const ref = (this.addQuoteDialogRef = this.dialogService.open(
      AddQuoteDialogComponent,
      {
        width: '95%',
        styleClass: 'user-details',
        showHeader: false,
        //contentStyle: { 'max-height': '500px', overflow: 'auto' },
        height: '70',
        data: {
          selectedData: selectedData,
        },
        dismissableMask: true,
      }
    ));
    ref.onClose.subscribe((response) => {
      ref.destroy();
    });
    return ref;
  }

component 2

  onClose() {
    console.log('onclose');
    this.quoteDisplayFalse();
    this.ref.close();
  }