(Inline Editable Grid) No focus on template-based column with tab navigation

[Issam DANO]

I defined an inline editable grid. It has 2 columns: Name (primary key) column and Country column defined via template to render a dropdown list. Everything is working fine except that when I click on "Add" to add an empty row, clicking on tab to move the next column (which is the dropdown list), the focus is stuck in the first column. However, once the row is added (via toolbar Update button ), the tab navigation between cells is working correctly:

Could you help to fix the tab navigation issue, please ?

Here is the code sample:

import { FormsModule } from '@angular/forms'

import { GridModule, EditService, ToolbarService, GridComponent } from '@syncfusion/ej2-angular-grids'

import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'

import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'

import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({

  selector: 'nav-tab-grid',

  template: `

    <style>

      .control-section{margin-top: 50px;}        

    </style>

    <div class="control-section">

      <div class="col-lg-9">

        <ejs-grid #normalgrid id='Normalgrid' [dataSource]='gridData'      

        [editSettings]='{ allowEditing: true, allowAdding: true, allowDeleting: true }'

        [toolbar]="['Add', 'Edit', 'Delete', 'Update', 'Cancel']">          

        <e-columns>

              <e-column uid="Name" field='Name' headerText='Name' width='140' textAlign='Right' isPrimaryKey="true"></e-column>

              <e-column uid="Country" field='Country' headerText='Country' width='140' textAlign='Right'>

                <ng-template #editTemplate let-data>

                  <ejs-dropdownlist #dropdown

                    [dataSource]="[

                      {label: 'Japan', code: 'JPN', id:1},

                      {label: 'Spain', code: 'SPN', id:2},

                      {label: 'Chile', code: 'CHE', id:3}]"

                    allowObjectBinding="true"

                    [fields]="{text: 'label'}">

                  </ejs-dropdownlist>                  

                </ng-template>

              </e-column>              

        </e-columns>

        </ejs-grid>

      </div>    

    </div>

  `,

  providers: [EditService, ToolbarService],

  standalone: true,

  imports: [GridModule, FormsModule, FormsModule,

            TextBoxModule, AutoCompleteModule, DropDownListModule],

})

export class NavTabGrid implements OnInit {

  @ViewChild(GridComponent) dataGrid!: GridComponent;

 

  gridData: Object[] = []  

 

  constructor() {}

  public ngOnInit(): void {            

    this.gridData = [];

  }

}

[Santhosh Iruthayaraj]

Hi Issam DANO,

Greetings from Syncfusion Support.

We have confirmed that the reported behavior is an issue from our side and logged it as “Unable to navigate to editTemplate with keyboard while adding record”. 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 technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on “December 10, 2024”.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/63282/unable-to-navigate-to-edittemplate-with-keyboard-while-adding-record

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,

Santhosh I

[Santhosh Iruthayaraj]

Hi Issam DANO,

We were unable to include the fix for the issue "Unable to navigate to editTemplate with keyboard while adding record" as promised in today's weekly release due to some complexities. However, we assure you that the fix will be included in the next weekly release on December 17, 2024.

We apologize for any inconvenience this may have caused and appreciate your understanding.

Regards,

Santhosh I

[Santhosh Iruthayaraj]

Hi Issam DANO,

We are glad to announce that, we have included the fix for the issue “Unable to navigate to editTemplate with keyboard while adding record” in our 28.1.35 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

Root Cause: The skipOn method did not include input elements from the editTemplate, causing improper Tab and Shift+Tab navigation in the add record form.

Fix: Updated the selector value in the skipOn method to include input elements from both column fields and the editTemplate for proper navigation.

Feedback: https://www.syncfusion.com/feedback/63282/unable-to-navigate-to-edittemplate-with-keyboard-while-adding-record

Sample: https://stackblitz.com/edit/angular-grid-u7mdtf-8bxxmvqr

Release Notes: Essential Studio for Angular Weekly Release (28.1.35) | Release Notes

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance.

Regards,

Santhosh I