ejs-dropdownlist flicker issue in MatDialog

[Ronald Koh]

Hi,

I am using these tech version:

• Angular: ~9.1.2
• "@syncfusion/ej2-angular-dropdowns": "^18.4.49"
• "@angular/material": "^9.1.2"

I am using ejs-dropdownlist in MatDialog, and it's having flickering issue. The first expand on the dropdown works, but subsequent expand will flicker (dropdown opened & closed immediately)

I am unable to run a Stackblitz using the above version for some reason, would be appreaciated if the team would help to create a Stackblitz for this.

Thanks and be,

Ronald

[Pranav Karne]

Enterprise Chronicles is your premier source for insightful and innovative coverage of global business and industry trends. We delve deep into the dynamic world of entrepreneurship, corporate strategy, and market insights, delivering authoritative perspectives and expert analysis to our readers.

[Ronald Koh]

I think you mistakenly response with automated AI?

[Ronald Koh]

Quick update, after hacking around, it's found that without upgrade the synfusion library version to >20, which then can use this approach recommended by Copilot

```

[popupSettings]="{ appendTo: '.mat-dialog-content' }"

```
This was what worked for me by hacking the focus to completely skip the ejs-dropdownlist and all its related focusable child by binding to the `beforeOpen` event

```

(beforeOpen)="onDropdownBeforeOpen($event)"

```

If there's a better recommended way to workaround this do let me know.

Thanks and best regards,

Ronald

Thank

[Mallesh Ravi Chandran]

We are pleased to know that the solution works well for your scenario. We would also like to clarify that the beforeOpen event is fully supported in the DropDownList component and can be used as expected. However, the popupSettings → appendTo API is not available for the DropDownList at this time, as the component does not currently provide an option . 

Documentation reference : https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/index-default#beforeopen

We would like to suggest that you continue following this approach in your implementation. If you encounter any complexities, additional concerns while using this approach in the future, get back to us.