The placeholder of the selected items in the multiselect takes a lot of time to appear when the data is async.

Hi,

I'm currently working in an angular project, which has a multiselectdropdown element. For the datasource of the multiselect I use async data (I takes some seconds to be available). But, when It is available, the place holder of the selected items of the multiselectdropdown takes some minutes to appear.

This are my versions:

"dependencies": {
    "@angular/animations": "^16.0.2",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/material": "^16.1.5",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@syncfusion/ej2-angular-base": "^20.4.52",
    "@syncfusion/ej2-angular-buttons": "^20.4.50",
    "@syncfusion/ej2-angular-calendars": "^21.2.9",
    "@syncfusion/ej2-angular-dropdowns": "^20.4.52",
    "@syncfusion/ej2-angular-grids": "^20.4.54",
    "@syncfusion/ej2-angular-inputs": "^20.4.52",
    "@syncfusion/ej2-angular-layouts": "^20.4.48",
    "@syncfusion/ej2-angular-lists": "^20.4.50",
    "@syncfusion/ej2-angular-navigations": "^20.4.52",
    "@syncfusion/ej2-angular-notifications": "^20.4.48",
    "@syncfusion/ej2-angular-popups": "^20.4.52",
    "@syncfusion/ej2-angular-querybuilder": "^20.4.51",
    "@syncfusion/ej2-angular-splitbuttons": "^20.4.50",
    "@syncfusion/ej2-angular-treegrid": "^20.4.54",
    "@syncfusion/ej2-base": "^20.4.51",
    "@syncfusion/ej2-inputs": "^20.4.52",
    "@syncfusion/ej2-material-theme": "~21.2.6",
    "@tweenjs/tween.js": "^20.0.3",
    "@types/three": "^0.152.1",
    "crypto-js": "^4.1.1",
    "jspdf": "^2.5.1",
    "rxjs": "~7.8.0",
    "save": "^2.9.0",
    "three": "^0.153.0",
    "tslib": "^2.3.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.13.0"
  },

Thank you,

David.


3 Replies

KP Kokila Poovendran Syncfusion Team August 7, 2023 12:19 PM UTC

Hi David P.G.,


We have validated the reported query on our end. Unfortunately, we weren’t able to reproduce the reported issue as per your scenario.


Sample:https://stackblitz.com/edit/angular-5fa5f4-lxngsd?file=src%2Fmain.ts,src%2Fapp%2Fapp.module.ts,package.json


Also, we request that you provide additional details about the issue, as mentioned below. This will help us validate the issue further and provide you with a better solution.


  • Issue a reproducible sample (or modify the shared sample as per your scenario).
  • Issue reproducing steps alone with video illustration if applicable. 


DP David P.G. August 9, 2023 11:41 AM UTC

Hi Kokila,

The issue happens when the data is async, and when it takes some seconds to be available. Also, to happen the issue there must be some values selected in the multiselect dropdown list, because the place holder is for that selected values. Appart from that, I use the ChangeDetectionStrategy.OnPush.

I've done this stackblitz where you can see the problem:

https://stackblitz.com/edit/angular-5fa5f4-kpxujd?file=src%2Fmain.ts,src%2Fapp.component.html,package.json,src%2Fapp.component.ts

Despite of selecting some records, with [value] propertie of the MultiSelectDropdown, they don't appear as selected and the placeholder doesn't appear.

Thank you,

David.



KP Kokila Poovendran Syncfusion Team August 10, 2023 03:45 PM UTC

Hi David P.G.,


We apologize for any confusion you've experienced. To ensure we comprehensively address your concern, we kindly request further information from your end.


We took a look at the StackBlitz sample you provided, but it appears that the data source is not loading as expected. Could you please confirm if the data source not being loaded is indeed the issue, as you mentioned? If not, could you provide a step-by-step procedure to reproduce the issue, along with any necessary data or context?


To better understand the problem, it would be immensely helpful if you could share a video illustrating the behavior you're experiencing. This will aid us in our investigation and enable us to provide a more accurate solution.


Regards,

Kokila Poovendran.


Loader.
Up arrow icon