DropDown List is not working in angular Material Dialog

Hi everyone, I have a problem with the syncfusion dropdown list. I have inserted the dropdown inside an angular material modal. It seems that these two elements conflict in that when I click on the dropdown to display the values, they do not show up. Do you have a solution? I've already tried playing around with the z-index property and it didn't work. This is the code for my dropdown:

<ejs-dropdownlist id='ddlType' #typeObj (open)="onOpen($event)" [formControl]="formGroup.get('type')"
                    [dataSource]='address_types' [fields]='typeFields' placeholder='Tipo (*)' popupHeight='200px'
                    popupWidth='120pt' floatLabelType="Always" width="120pt" [zIndex]="900000">
               </ejs-dropdownlist>

3 Replies

KP Kokila Poovendran Syncfusion Team May 15, 2024 04:09 PM UTC

Hi Angelo Maria Esposito,



Thank you for reaching out to us with your concern regarding the Syncfusion dropdown list not working inside an Angular Material modal.


We've thoroughly investigated your query and tested the issue with a simple sample, but we couldn't replicate the reported problem. Please find the sample provided below:


Samplehttps://stackblitz.com/edit/angular-mucex9?file=src%2Ftest-dialog%2Ftest-dialog.component.html,src%2Findex.html,src%2Ftest-dialog%2Ftest-dialog.component.ts


In the provided sample, we've rendered the dropdownlist component inside a Material dialog, and the dropdown popup opened properly without any issues.


To assist you better, could you please modify the shared sample to replicate your specific scenario where the issue occurs? This will help us identify and resolve the problem promptly. We appreciate your understanding.





If you have any further questions or encounter any difficulties, please feel free to let us know.



Regards,
Kokila poovendran.



AM Angelo Maria Esposito May 16, 2024 09:20 AM UTC

Hello,

I tried to modify the project on stackblitz according to my project, but on stackblitz it seems to work. Can you give me some advice on what I could check that might conflict?


I post how my project behaves


Attachment: video_dropdown_e87bb5c1.zip


KP Kokila Poovendran Syncfusion Team May 27, 2024 12:28 PM UTC

Hi Angelo Maria Esposito


We have validated the reported issue and were able to replicate it on our end. Since the issue does not occur in the StackBlitz sample, it suggests there might be specific configurations or code in your local project causing the conflict.


To assist you further, could you please provide the following:


  1. A runnable version of your local project that replicates the issue. This will help us to precisely diagnose the problem.

  2. Syncfusion package version.


By sharing these details, will enable us to provide a more accurate solution. Thank you for your cooperation and understanding.





Loader.
Up arrow icon