Autocomplete error adding items

[Manuel]

Hi Support Team,

I have an autocomplete control with showPopupButton set to true inside a modal. I found a problem.

If I work with this sequence of actions:

1. open the modal (meantime the modal is opening I use addItem to AutoComplete)

2. click on the button to show the popup

3. close the modal

4. open the modal again (meantime the modal is opening I use addItem to AutoComplete)

I get the error below in the console

ERROR TypeError: Cannot read property 'parentElement' of undefined

at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/drop-down-list/drop-down-list.js.DropDownList.setEnableRtl (drop-down-list.js:312)

at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/drop-down-base/drop-down-base.js.DropDownBase.render (drop-down-base.js:1020)

at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/drop-down-list/drop-down-list.js.DropDownList.renderList (drop-down-list.js:161)

at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/drop-down-base/drop-down-base.js.DropDownBase.addItem (drop-down-base.js:1056)

at AutoCompleteComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/combo-box/combo-box.js.ComboBox.addItem

Can we solve in some way?

Thank you

[Ponmani Murugaiyan]

Hi Manuel, 

Thanks for contacting Syncfusion support. 

Based on the information you provided, we created a sample by rendering the AutoComplete component inside both the Syncfusion Dialog component and Bootstrap modal dialog and ensured with the given procedure. Unfortunately, we were unable to reproduce the issue on our end. In the below sample we addded the items in the button click using the public method addItem, as seen in the code snippet below. Please see the samples and video demonstrations below. 

public BtnClick = (): void => { 

    let newItem = { Id: "game0", Game: "Hockey" }; 

    (this.AutoCompleteObj.dataSource as Object[]).push(newItem); 

    this.AutoCompleteObj.addItem(newItem); 

    this.Dialog.show(); 

  }; 

 

Sample (Syncfusion Dialog): https://stackblitz.com/edit/angular-ahh6ce-1jn1vi?file=app.component.ts 

Sample (Bootstrap modal dialog): https://stackblitz.com/edit/bootstrap-modal-input-value-b6km4s?file=app%2Fapp.component.ts 

Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_3-05-2021_8.17.49_AM.mp4-217552061 

Kindly check with the above sample and replication procedure made in our end which is demonstrated in the video. If we missed to replicate or any changes in the code, please revert us with below details. 

1. Share Syncfusion dropdown package version.
2. Whether rendered Autocomplete inside Syncfusion dialog or Bootstrap dialog.
3. Share code snippet along with issue replication video demonstration.
4. If possible try to replicate in the above provided sample.

The above requested details will help us to check and provide you the solution at earliest. 

Regards, 

Ponmani M