Visual glitch when using dropdownbuttons inside listviews

[Corrado Di Blasio]

<ng-template #listTemplate let-metadata>

<div class="e-list-wrapper e-list-multi-line e-list-avatar e-list-badge">

...

        <button

        ejs-dropdownbutton

            #dropdownButton

            iconCss="e-icons threedot"

            cssClass="e-small e-caret-hide e-custom e-badge"

            [items]="dropdownListItems"

            (select)="onMenuItemClick($event, metadata)"

            (open)="onDropdownOpen($event, dropdownButton)"></button>

</div>

</ng-template>

The visual glitch happens for a brief moment after the datasource of the listview changes, said datasource is an array that ultimately depends on an observable so it's dynamic by nature. Notice that it doesn't happen on the first page render.

As you can see from the image, everything on the list is rendered without a problem, apart from the 'badge' dropdown elements. I have tried many fixes, but my final understanding is that the moment I enable the button, there is always a little delay before its styles are fully loaded.

Is there anything I could try? The glitch, even if it lasts for a fraction of a second, is still annoying because it changes the height of the rows so it affects the entire list. Ultimately, what I'm after is to have a dropdown button at the end of each row

Attachment: Bug_79905f1d.jpg

[Mallesh Ravi Chandran]

We have thoroughly validated the reported concerns regarding the ListView with DropdownButton implementation using itemTemplate. We have attempted to replicate the reported scenario through comprehensive testing of various data update patterns.

Testing Scenarios Conducted

We have implemented and tested the following approaches to trigger potential visual glitches:

1. Update DataSource: Complete replacement of the data array to simulate observable-based updates
2. Add New Items: Dynamic addition of items to existing data to test incremental changes
3. Shuffle Data: Reordering existing items to simulate data reorganization
4. Clear & Reload: Complete data clearing followed by reloading with content
   
   

Sample : https://stackblitz.com/edit/angular-ppntdwwk-17rd6c6t?file=src%2Fapp.component.ts,src%2Fapp.component.html,package.json

During our extensive testing, we have not observed any visual glitch effects with the DropdownButton elements when the datasource changes dynamically. We have attached a sample that includes multiple dynamic update scenarios, pre-loading mechanisms for dropdown button styles, proper change detection handling .

If the issue persists in your end, we would appreciate if you could provide an issue-replicating sample that demonstrates the glitch, modify our provided sample to reproduce the problem, or share any console errors or warnings that occur during the glitch. This additional information will help us provide a more targeted solution and ensure we address the specific scenario you are experiencing.