ngBootstrap Modal with ejs-dropdownlist doesn't show the correct selected item

[LastCodeDE]

Hello,

we have an issue with the ejs-dropdownlist control on a ngBootstrap modal view. We are using the fallowing dependencies:
    "@ng-bootstrap/ng-bootstrap": "1.0.1",
    "@syncfusion/ej2-ng-base": "16.1.32",
    "@syncfusion/ej2-ng-buttons": "16.1.32",
    "@syncfusion/ej2-ng-calendars": "16.1.32",
    "@syncfusion/ej2-ng-dropdowns": "16.1.32",
    "@syncfusion/ej2-ng-grids": "16.1.32",
    "@syncfusion/ej2-ng-inputs": "16.1.32",
    "@syncfusion/ej2-ng-navigations": "16.1.32",
    "@syncfusion/ej2-ng-popups": "16.1.32"

We are using on the view ChangeDetectionStrategy.OnPush.

In our project we open a modal view that contains the ejs-dropdownlist control. The ngModel and the index get the control from the open function.

<ejs-dropdownlist #Dropdown [fields]="fieldsvalues" [height]="_hoehe" [(ngModel)]="value"

[placeholder]="_placeholder" [enabled]="!_disabled" [required]="_required" (blur)="onBlur()" [index]="_index"

[popupWidth]="_popupWidth" [width]="_width" zIndex="5000" >

ejs-dropdownlist>

At the first open, the dropdownlist shows the correct item. Then on the second time there is no item selected in the control and on the third time everything is correct. So every second time the control doesn't show the correct item.

First                                Secound                                     Third


I tried to set the index manually with this function:

selectItemByValue(table: { value: any, text: string }[], value: any) {

if (value != null && table.length != 0) {

var index = table.findIndex((satz) => {

return satz.value == value;

})

if (index != null) {

this._index = index;

}

}

}

The index seams to be correct but the control doesn't show the correct selected item. I think the problem is a refresh of the index of the control in a modal view.

Additionally  we use this function to write the value:

writeValue(value: any) {

if (value !== this.innerValue) {

if (typeof value === "number") {

this.innerValue = value.toString();

} else {

this.innerValue = value;

if (!value) {

this.dropDown.index = null;

}

}

}

}

When I open a view, this code is used 3 times. On the first and second time the variable value get the null value. I think when the control gets a null value for initialisation, the control should refresh and select no item, because sometimes the old value will be preselected.

For this problem we need fast an workaround or fix.

Regards
LastCodeDE

[Ilakkiya Baskar]

Hi David ,    

Thank you for contacting Syncfusion Support. 

We analyzed your query. We cannot reproduce the issue that you reported. 

If issue persists,  

    1.kindly share us a code snippet to showcase the issue.  

    2.kindly share us a screenshot which showcase the error(like console error). 

 

Please refer the sample in the below location, 

http://www.syncfusion.com/downloads/support/forum/137088/ze/ej2-Dropdownlist-Modal-dialog-master_(2)-1189803868 

If possible , modify the above sample to reproduce the issue in our end so that we can proceed further  

 

Let us know if there is any concern, we will be happy to assist you. 

Regards, 

Ilakkiya B