Проблема с табуляцией в столбце кнопок с использованием события подавления клавиатуры ⇐ Html

[Anonymous]

Я столкнулся с проблемой в реализации AG Grid в Angular. Я добавил событие подавления клавиатуры, чтобы пользователи могли переходить в ячейку и взаимодействовать с кнопкой внутри этой ячейки с помощью клавиатуры. Однако когда пользователь переходит в столбец кнопки, он, похоже, «запирается» на кнопке, что предотвращает дальнейшую навигацию с помощью клавиши Tab. Перемещение заголовков с помощью табуляции работает нормально, но эта проблема возникает только с кнопкой внутри ячейки сетки.
app.comComponent.ts
import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import type { ColDef, GridApi, SuppressKeyboardEventParams } from 'ag-grid-community';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
import { ButtonRendererComponent } from './button-renderer/button-renderer.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [AgGridAngular, ButtonRendererComponent],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
private gridApi!: GridApi;
searchText = '';

rowData = [
{ name: "Dog", type: "Mammal", size: "Medium", speed: "Fast", lifespan: "10-15 years" },
{ name: "Cat", type: "Mammal", size: "Small", speed: "Fast", lifespan: "12-18 years" },
{ name: "Turtle", type: "Reptile", size: "Small", speed: "Slow", lifespan: "50-100 years" },
{ name: "Rabbit", type: "Mammal", size: "Small", speed: "Fast", lifespan: "8-12 years" },
{ name: "Parrot", type: "Bird", size: "Small", speed: "Medium", lifespan: "50-80 years" },
{ name: "Elephant", type: "Mammal", size: "Large", speed: "Slow", lifespan: "60-70 years" }
];

columnDefs: ColDef[] = [
{ field: "name", sortable: true, filter: true },
{ field: "type", sortable: true, filter: true },
{ field: "size", sortable: true, filter: true },
{ field: "speed", sortable: true, filter: true },
{ field: "lifespan", sortable: true, filter: true },
{
headerName: 'Action',
field: 'action',
cellRenderer: ButtonRendererComponent
}
];

public defaultColDef: ColDef = {
minWidth: 130,
suppressKeyboardEvent : this.suppressKeyboardEvent
};

onGridReady(params: any) {
this.gridApi = params.api;
}

// Function to trigger the alert
sayHello() {
alert('Hello!');
}

GRID_CELL_CLASSNAME = 'ag-cell';

getAllFocusableElementsOf(el: HTMLElement) {
return Array.from(
el.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
),
).filter((focusableEl) => {
return focusableEl.tabIndex !== -1;
});
}

getEventPath(event: Event): HTMLElement[] {
const path: HTMLElement[] = [];
let currentTarget: any = event.target;
while (currentTarget) {
path.push(currentTarget);
currentTarget = currentTarget.parentElement;
}
return path;
}

suppressKeyboardEvent({ event }: SuppressKeyboardEventParams) {
const { key, shiftKey } = event;
const path = this.getEventPath(event);
const isTabForward = key === 'Tab' && shiftKey === false;
const isTabBackward = key === 'Tab' && shiftKey === true;
let suppressEvent = false;

if (isTabForward || isTabBackward) {
const eGridCell = path.find((el) => {
return el.classList?.contains(this.GRID_CELL_CLASSNAME);
});

if (!eGridCell) {
return suppressEvent;
}

const focusableChildrenElements = this.getAllFocusableElementsOf(eGridCell);

const lastCellChildEl = focusableChildrenElements[focusableChildrenElements.length - 1];
const firstCellChildEl = focusableChildrenElements[0];

if (focusableChildrenElements.length === 0) {
return false;
}

const currentIndex = focusableChildrenElements.indexOf(document.activeElement as HTMLElement);

if (isTabForward) {
const isLastChildFocused = lastCellChildEl && document.activeElement === lastCellChildEl;
if (!isLastChildFocused) {
suppressEvent = true;
event.preventDefault();
focusableChildrenElements[currentIndex + 1].focus();
}
} else {
const isFirstChildFocused = firstCellChildEl && document.activeElement === firstCellChildEl;
if (!isFirstChildFocused) {
suppressEvent = true;
event.preventDefault();
focusableChildrenElements[currentIndex - 1].focus();
}
}
}
return suppressEvent;
}

}

app.comComponent.html



button-renderer.comComponent
import { Component } from '@angular/core';

@Component({
standalone: true,
templateUrl: './button-renderer.html',
})
export class ButtonRendererComponent {
params: any;

agInit(params: any): void {
this.params = params;
}

onClick() {
alert('Hello');
}
}

button-renderer.html
Click


Подробнее здесь: https://stackoverflow.com/questions/794 ... ress-event