PopupClose Event doesn't get triggered

[shawn]

I create popup by add event listener: 

scheduleObj.addEventListener('popupOpen', (e: PopupOpenEventArgs) => {
    $('#booking-form-container-' + config.calendarId).html('');
    $('#sequence-booking-form-container-' + config.calendarId).html('');
    console.log('Whole Object:');
    console.log(scheduleObj);
    if (e.type === 'QuickInfo' || e.type === 'ViewEventInfo') {
        isPopupOpen = true;
        //check close event args
        e.element.ej2_instances[0].addEventListener('beforeClose', (arg: BeforeCloseEventArgs)=>{
           console.log("beforeCloase:");
        });
        e.element.ej2_instances[0].addEventListener('beforeOpen', (arg: BeforeOpenEventArgs)=>{
            console.log("beforeOpen:");
        });
        $(e.element).find('.e-resource, .e-delete, .e-edit').remove();
        if(e.type === 'QuickInfo')
        {
            $(e.element).find('.e-quick-popup-wrapper').css('max-width', '500px');
            $(e.element).find('.e-event-popup').attr('style', 'width: 500px;background-color:#fff');
        }
        if (!popupCloseHandled) {
            popupCloseHandled = true;
            e.element.ej2_instances[0].addEventListener('close', () => {
                isPopupOpen = false;
            });
        }
        if (config.cardUrlTemplates[dataIndex] === '') return;
        let url = config.cardUrlTemplates[dataIndex].replace('{{objectId}}', e.data['Id']);
        $.ajax({
           type: 'GET',
           dataType: 'json',
           url: url,
           success(ajaxData) {
               $('#related-links-modal-content-' + config.calendarId).html('');
               $('#related-links-modal-' + config.calendarId).find('.modal-dialog').attr('style', 'width: 98%; height: 98%');
               let form = `<div class="e-control-wrapper e-dlg-content">${ajaxData.form}</div>`;
               if ($(form).find('form').length) {
                   form += `<div><button id="popup-update-form" class="btn btn-primary">Update</button></div>`;
               }

               $(e.element).find('.e-popup-content').append(form);
               e.element.ej2_instances[0].refreshPosition();

               $('.calendar-popup-related-link').on('click', (event) => {
                   event.preventDefault();

                   $.ajax({
                       type: 'GET',
                       url: $(event.target).attr('rel='nofollow' href'),
                       success(ajaxData) {
                           $('#related-links-modal-content-' + config.calendarId).html(ajaxData);
                           $('#related-links-modal-' + config.calendarId).modal('show');

                           e.element.ej2_instances[0].hide();
                       }
                   });
               });

               $('.calendar-popup-template').on('click', (event) => {
                   event.preventDefault();
                   let url = $(event.target).attr('rel='nofollow' href');
                   console.log("url");
                   console.log(url);
                   $('#related-templates-modal-content-' + config.calendarId).html('<iframe src="' + url + '" style="width: 100%; height:90vh" align="center"></iframe>');
                   $('#related-templates-modal-' + config.calendarId + ' .modal-dialog').removeClass('modal-xl')
                   $('#related-templates-modal-' + config.calendarId).find('.modal-dialog').attr('style', 'width: 95%; height: 95%');
                   $('#related-templates-modal-' + config.calendarId).modal('show');

                   e.element.ej2_instances[0].hide();
               });

               $('#popup-update-form').on('click', (event) => {
                   event.preventDefault();
                   let $form = $(e.element).find("form[id^='data-']");

                   $.post({
                       url: $form.attr('action'),
                       data: $form.serialize(),
                       success() {
                           e.element.ej2_instances[0].hide();

                           refreshEvents(currentMonth);
                       }
                   });
               });
           }
        });
    }
    if (e.type === 'Editor') {
        e.cancel = true;
        location.rel='nofollow' href = config.urlTemplate.replace('{{name}}', e.data['Class']).replace('{{id}}', e.data['Id']);
    }
});

Here is my code for Schedule:

let scheduleObj: Schedule = new Schedule({
    height: '850px',
    selectedDate: config.date,
    views: config.allViews,
    eventSettings: {
        dataSource: data[dataIndex],
    },
    allowDragAndDrop: false,
    allowKeyboardInteraction: false,
    allowResizing: false,
    resources: config.groupingResources[dataIndex].concat([
        config.colorResource,
    ]),
    group: config.grouping[dataIndex],
    startHour: '06:00',
    endHour: '20:00',
    timeScale: {
        enable: false,
        interval: 5,
        slotCount: 1,
    },
    showWeekend: true,
    enablePersistence: (config.defaultView as any as string) === '',
    currentView: config.defaultView,
    cssClass: 'schedule-cell-dimension',
    popupClose:(args: PopupCloseEventArgs)=>{
        console.log("Popup close:");
        console.log(args);
    },
    actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem: ItemModel = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-ics-export',
                text: 'ICS Export', cssClass: 'e-ics-export', click: () => scheduleObj.exportToICalendar(),
            };
            args.items.push(exportItem);
            let refreshItem: ItemModel = {
                align: 'Right', showTextOn: 'Both', prefixIcon: '',
                text: 'Refresh', cssClass: '', click: () => refreshEvents(config.date.toISOString().substring(0, 10)),
            };
            args.items.push(refreshItem);
        }
    }
});

[Balasubramanian Sattanathan]

Hi Shawn, 

Greetings from Syncfusion Support. 

We have validated your reported scenario and checked it by preparing the below sample. Since the popupClose event has been triggered properly at our side. So we would suggest you to follow and refer the below sample and UG links. 

Code snippet: 

popupClose: (args: PopupCloseEventArgs) => { 

  console.log("Popup close"); 

  console.log(args); 

}, 

popupOpen: (args: PopupOpenEventArgs) => { 

  console.log("Popup open"); 

  console.log(args); 

} 

Sample: https://stackblitz.com/edit/9xxwzj-gsyoig?file=index.ts 

UG: https://ej2.syncfusion.com/documentation/api/schedule/#popupclose 

Kindly try the above sample and let us know if the solution is helpful. 

Regards, 

Balasubramanian S