After reassigning ejs-dropdownlist's [dataSource] and [value], the previous value remain as a option

[Ronald Koh]

I have a dropdown where its value is dynamic (updated based on other input), and the previously selected value will remain in the new list (which doesn't have that value as an option) as an option

For example, originally, the dropdown has options (A,B,C) and selected value (A), then event triggers, and the dropdown update its options to (D,E,F) and new selected value (D). When I expand the dropdown, I see options (D,E,F,A) instead of (D,E,F)

I ask GPT and it say this is known behaviour of syncfusion, it caches the previous value when it doesn't exist in the new option list. I tried several workaround like:

• reassigning the [dataSource] in setTimeout()
• called .refresh() of the dropdown in setTimeout()

and it doesn't work.

The only way it works was me to set the [value] to an empty value initially and pair it with *ngIf to force the entire DOM to rebuild itself. But this will causes a small visual flash on the UI which I don't want.

Please let me know if there is a workaround for this issue, and let me know if more detail are needed, thanks

[YuvanShankar Arunagiri]

Hi Ronald,

We have validated your reported query with our Dropdown List component and prepared a sample based on your provided demonstration. However, we were unable to reproduce the issue you mentioned. Please refer to the video demonstration and the sample link provided below.

Sample link: https://stackblitz.com/edit/angular-6zajkfei?file=src%2Fapp.component.ts

If you are still facing the issue, kindly share an issue-replicating sample, or reproduce the issue using our shared sample along with a video demonstration for better understanding. Additionally, please share the Syncfusion package versions you are using in your environment. This will help us investigate further and provide you with a more accurate solution.

Regards,

YuvanShankar A

[Ronald Koh]

hi, Thanks for the follow up.

I have edited the code a bit to ensure it's the same as the one on my application. But I am unable to replicate the issue on my end on stackblitz, not sure what I am missing.
https://stackblitz.com/edit/angular-6zajkfei-mqrecmrj?file=src%2Fapp.component.ts

I have attached GIF on how the issue looks like on my end, it can be seen that EQUAL value exist on the list where it should have only TRUE and FALSE, and vise versa.

In Debug mode on my onChange() method, I have check the variable passed and it's correct:

For the context I am using:

• "@syncfusion/ej2-angular-dropdowns": "~20.1.60"
• Angular CLI: 13.3.9
• Node: 12.22.12

Attachment: oldvaluestayejsdropdownezgif.comvideotogifconverter_8af371f.gif

[YuvanShankar Arunagiri]

Hi Ronald,

We can reproduce your reported issue in your mentioned Syncfusion package version (20.1.0.60) with the Angular 13 sample. To resolve your reported issue in the mentioned Syncfusion version package, kindly refer to the below code snippet and attached sample.

<ejs-dropdownlist

        #dropdown1

        [dataSource]="data1"

        [value]="value"

        (change)="onChange1($event, dropdown2)"

      ></ejs-dropdownlist>

….

public onChange1(args: any, obj: any): void {

    if (args.value === 'Option1') {

      this.dataList[0].operationList = ['A', 'B', 'C'];

      this.dataList[0].value = 'A';

      //   this.dropdown2.dataBind();

    } else if (args.value === 'Option2') {

      obj.value = '';

      obj.refresh();

      this.dataList[0].value = 'D';

      this.dataList[0].operationList = ['D', 'E', 'F'];

      //   this.dropdown2.dataBind();

    }

  }

Output screenshot:

Additionally, we suspect that there was an issue in our older version, so we recommend updating the Syncfusion package to the latest version to resolve this issue.

Please get back to us if you need any further assistance. 

  

Regards, 

YuvanShankar A

Attachment: ang13ddl_30450ac7.zip

[Ronald Koh]

Hi, that resolve the issue thanks a lot for the support!

[YuvanShankar Arunagiri]

You are welcome, Ronald. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.