Not able to get the value of the option selected when using ejs-dropdownlist with Template

Throwing error as 

Cannot read properties of null (reading 'querySelector')

at FormBase.selectEventCallback (ej2-dropdowns.es2015.js:2362:1)

    at FormBase.<anonymous> (ej2-dropdowns.es2015.js:2344:1)

    at push.92717.ComponentBase.trigger (component-base.js:331:1)

    at FormBase.updateSelectedItem (ej2-dropdowns.es2015.js:2339:1)

    at FormBase.setSelection (ej2-dropdowns.es2015.js:2415:1)

    at FormBase.onMouseClick (ej2-dropdowns.es2015.js:1966:1)

    at _ZoneDelegate.invokeTask (zone.js:406:1)

    at Object.onInvokeTask (core.mjs:25595:1)

    at _ZoneDelegate.invokeTask (zone.js:405:1)

    at Zone.runTask (zone.js:178:1)

when selecting an option in the ejs-dropdownlist with templates.

please find the code below
can you please suggest what could be the cause of the issue and how to solve it 

  <ejs-dropdownlist #workCommitmentdropdown formControlName="WorkCommitmentId" class="work-commitment-dropdown"
                [popupWidth]="'auto'" [fields]="fields" [allowFiltering]="true"
                [dataSource]="workCommitments"
                >
                <ng-template #itemTemplate let-data>
                  <span class="dropdown-row">
                    <span class="wc-name">{{ data?.name }}</span>
                    <span class="region-list">{{ data?.regionAbbr}}</span>
                  </span>
                </ng-template>
              </ejs-dropdownlist>

1 Reply

KP Kokila Poovendran Syncfusion Team October 4, 2024 09:45 AM UTC

Hi  Devi Meyyappan,


Thank you for your query.

We have reviewed the issue you described and prepared a sample based on your provided code. After testing, we were unable to replicate the error. You can find the sample we used for testing below, which includes a similar template setup.
 

Sample for reference: Sample Link

To assist you further, we kindly request the following:

  1. Please share the complete code snippet, including your package.json file.
  2. Ensure that all the Syncfusion package versions are aligned correctly. Version mismatches can sometimes cause such issues.

If you are still facing the problem, please provide your complete code setup so we can test it thoroughly on our end and provide a prompt solution.


Loader.
Up arrow icon