Element undefined when key pressed in cell with dropdownedit

[Dimitris]

Hello,

I've configured a TreeGrid cell with dropdownedit as per your documentation:

public organizationElementTypeObj: DropDownList;
public organizationHtmlElement: HTMLElement;
public organizationElementTypeParams: IEditCell;


ngOnInit(): void {
this.organizationElementTypeParams = {
  create:()=>{
    this.organizationHtmlElement = document.createElement('input');
    return this.organizationHtmlElement;
  },
  read:()=>{
    return this.organizationElementTypeObj.text;
  },
  destroy:()=>{
    this.organizationElementTypeObj.destroy();
  },
  write:(args: { rowData: any; column })=> {
    this.organizationElementTypeObj = new DropDownList({
      placeholder: 'please select',
      dataSource: this.organizationElementTypes,
      fields: { text: 'code', value: 'code' },
      value: args.rowData.type.code,
      allowFiltering: true,
      itemTemplate: '<div><div><b>${code}</b></div><div style="padding-left: 12px; text-indent: 0px;font-size: small; opacity: 0.8;white-space:normal;word-wrap: break-word;">${title}</div></div>',
      filtering: (args: FilteringEventArgs) => {
        if (this.organizationElementTypesSubscription) {
          this.organizationElementTypesSubscription.unsubscribe();
        }
        this.getOrganizationElementTypes(args.text);
        this.organizationElementTypesSubscription = this.organizationElementTypesObservable.subscribe((data: any) => {
          this.organizationElementTypes = data;
          args.updateData(this.organizationElementTypes);
        });
      }
    });
    this.organizationElementTypeObj.appendTo(this.organizationHtmlElement);
  }
};
}

This works well. But, while editing the grid row, when I use the TAB key to navigate to the cell and click DOWN KEY to select item from the dropdownlist, the following error occurs:

ERROR TypeError: Cannot read properties of undefined (reading 'classList')
    at addClass (ej2-base.es5.js:4713:26)
    at TreeGrid.treeGridkeyActionHandler (ej2-treegrid.es5.js:3542:37)
    at KeyboardEvents._this.keyPressHandler (ej2-base.es5.js:8577:35)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26278:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
    at invokeTask (zone.js:1661:18)
    at globalCallback (zone.js:1692:29)

Looking at the addClass method, ele is undefined in the following code:

else {
    if (!ele.classList.contains(className)) {
        ele.classList.add(className);
    }
}

The treegrid declaration is:

<ejs-treegrid
    [dataSource]='data'
    [treeColumnIndex]="3"
    childMapping='children'
    [toolbar]='toolbar'
    [editSettings]="editSettings"
    (actionBegin)="actionBegin($event)"
    (actionComplete)="actionComplete($event)">
    <e-columns>
        <e-column field='id' [isPrimaryKey]="true" [visible]="false" headerText="{{ 'common.id' | translate }}" width='100' textAlign="Left" [validationRules]='requiredNumberRule'></e-column>
        <e-column field='code' headerText="{{ 'common.code' | translate }}" width='100' textAlign="Left" [validationRules]='requiredRule'></e-column>
        <e-column field='type.code' headerText="{{ 'organizationElementType.type' | translate }}" editType= 'dropdownedit' [edit]='organizationElementTypeParams' [validationRules]="requiredRule" width='300'></e-column>
        <e-column field='title' headerText="{{ 'common.title' | translate }}"  textAlign="Left" [validationRules]='requiredRule'></e-column>
    </e-columns>
</ejs-treegrid>

Is this a bug?

Or am I missing something?

[Manivannan Padmanaban]

Hi Dimitris,

Greetings from Syncfusion Forums.

Currently we are validating your query and will update you the response on or before April 11, 2023.

Until then, we appreciate your patience.

Regards,

Manivannan Padmanaban

[Pon Selva Jeganathan]

Hi Dimitris,

Thanks for your patience.

We are able to replicate the issue(Script error thrown when moving Dropdown Option with key input (Arrow Keys) in Edit Template) at our end. On further validation, we have considered the reported issue (“Script error thrown when moving Dropdown Option with key input (Arrow Keys) in Edit Template”) as a bug.  Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming patch release which is expected to be rolled out on April 26,2023. Until then we appreciate your patience.

Feedback link: https://www.syncfusion.com/feedback/42810/script-error-thrown-when-moving-dropdown-option-with-key-input-arrow-keys-in-edit

Note: To view the above feedback, kindly login into your account. 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

Regards,

Pon selva

[Pon Selva Jeganathan]

Dimitris,

The weekly patch release scheduled for today, April 26, 2023, has been called off due to the expected rollout of the 2023 Volume 1 SP release. We will include the fix in first weekly patch release after the volume 1SP release. We will inform you once the fix has been published. We appreciate your patience until then.

[Pon Selva Jeganathan]

Dimitris,

We are Glad to announce that fix for the issue “Script error thrown when moving Dropdown Option with key input (Arrow Keys) in Edit Template” has been rolled out in our Patch release (21.2.4).  So please upgrade to our latest version of Syncfusion package to resolve the reported issue.  

Release Notes: https://ej2.syncfusion.com/documentation/release-notes/21.2.4/?type=all#tree-grid

Feedback link: https://www.syncfusion.com/feedback/42810/script-error-thrown-when-moving-dropdown-option-with-key-input-arrow-keys-in-edit