Table cell editing: Tab key navigation regression in v21 (works in v20)

[vinydanylo]

Description

Tab key navigation between editable table cells stopped working in PrimeNG v21, but works correctly in v20.

Current Behavior

When editing a cell in a table with editMode="cell" and pEditableColumn:

• Pressing Tab key does nothing (focus does not move to the next editable cell)
• Instead, focus moves to the next focusable element outside the table (e.g., action buttons like delete icons)

Expected Behavior

When pressing Tab key while editing a cell:

• Focus should move to the next editable cell in the table
• Shift+Tab should move to the previous editable cell
• This is how it works in PrimeNG v20.4.0

Steps to Reproduce

1. Create a table with multiple editable columns using editMode="cell" and pEditableColumn
2. Click on a cell to enter edit mode
3. Press the Tab key
4. Observe that focus does not move to the next editable cell

Code Example

@Component({
  template: `
    <p-table [value]="items" editMode="cell">
      <ng-template pTemplate="header">
        <tr>
          <th>Field 1</th>
          <th>Field 2</th>
          <th>Field 3</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
        <tr>
          <td pEditableColumn>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input pInputText [(ngModel)]="item.field1" />
              </ng-template>
              <ng-template pTemplate="output">
                {{ item.field1 }}
              </ng-template>
            </p-cellEditor>
          </td>
          <td pEditableColumn>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input pInputText [(ngModel)]="item.field2" />
              </ng-template>
              <ng-template pTemplate="output">
                {{ item.field2 }}
              </ng-template>
            </p-cellEditor>
          </td>
          <td pEditableColumn>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input pInputText [(ngModel)]="item.field3" />
              </ng-template>
              <ng-template pTemplate="output">
                {{ item.field3 }}
              </ng-template>
            </p-cellEditor>
          </td>
        </tr>
      </ng-template>
    </p-table>
  `
})

Environment

• PrimeNG version: 21.0.2 (broken) vs 20.4.0 (works)
• Angular version: 21.0.6
• Browser: All browsers affected
• Operating System: Windows 11

Additional Context

The v21 migration guide (https://primeng.org/migration/v21) mentions changes to the animation system (Angular animations → CSS animations) but does not document any changes to table cell editing or keyboard navigation behavior.

This appears to be an undocumented regression as:

1. Tab navigation worked in v20
2. No breaking changes are mentioned in the migration guide for Table component
3. The official documentation (https://primeng.org/table#cell-edit) does not describe built-in tab navigation, but it existed in v20

Related Issues

Similar historical issues with tab navigation:

• Table EditableColumn crashing on Tab key when loose ui-editing-cell #8470 - EditableColumn crashing on Tab key
• Tab based cell navigation support for non-editable columns #2520 - Tab navigation stuck at non-editable columns
• TreeTable: p-treetable tab navigation not working properly #12513 - TreeTable tab navigation problems

[tenrapid]

Yes, navigating editable cells with the keyboard (tab, arrow keys) does not work anymore.

The regression happened because of this commit:

d5617c9#diff-172481e670ba873382e6dc9096f8c232727b7bca62484a26c3875d6b62d2058fR4699

The exclamation mark got lost with the switch from DomHandler.hasClass() to find().

4651   -         while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
4699   +         while (cell && find(cell as HTMLElement, '[data-p-cell-editing="true"]')) {