dropdownlist close mat-Dialog

[thomas sabre]

Hello,

I'm currently working with angular 12 and the syncfusion components.

I have a problem with the ejs-dropdownlist component when it is in a mat-dialog modal.

I use the Chrome browser, console open in mobile mode. When I open my modal, and I select a value in my dropdownlist, the selection popup closes as well as the modal.

therefore, i can't recover the modal's data to process them.

below, an example reproduced on stackblitz: https://stackblitz.com/edit/angular-ivy-q8aqbn

thank you for your answers

Regards,

SABRE Thomas

[Berly Christopher]

Hi Thomas, 

  

Greetings from Syncfusion support. 

  

We will validate and update the further details in two business days (26^th July 2021). We appreciate your patience until then. 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Thomas, 

  

We need two more days to validate the issue at our end. So, we will provide further details on 28^th July 2021. 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Thomas,  

 

Thanks for your patience.  

 

In mobile mode, the multiselect will be opened in another page and the input element will be opened in another page. While pressing the back button, we need to go back to the previous page and save the history. So, in our source, we used history.back method. If we remove the history.back method from our source, it does not actually navigate to the previous page (Input element page) and simply closes the page. Thus, we override the source to prevent a pop-state event from triggering while selecting the value. Please use the following solution at the sample level to prevent an event from triggering globally for all drop-downs.  

 

    (DropDownList as any).prototype.onMouseClick = function (e) {  

      let target: Element = <Element>e.target;  

        let classList: DOMTokenList = target.classList;  

        let li: HTMLElement = <HTMLElement>closest(target, '.' + 'e-list-item');  

        if (!this.isValidLI(li)) {  

            return;  

        }  

        this.setSelection(li, e);  

        if (Browser.isDevice && this.isFilterLayout()) {  

             var delay = 100;  

             this.closePopup(delay);  

        } else {  

            let delay: number = 100;  

            this.closePopup(delay);  

        }  

      };  

 

Please find the sample below.  

 

Sample: https://stackblitz.com/edit/angular-ivy-8cakex?file=src%2Fapp%2Fconfirmation-dialog.component.ts  

 

Kindly get back to us for further assistance.  

 

Regards,  

Berly B.C 

[thomas sabre]

Hello,

Thank you for the answer, everything work perfectly.

Regards

[Berly Christopher]

Hi Thomas, 

  

We are glad to know that the issue is resolved at your end. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C