ag-grid keyboard navigation for frameworkComponents is not working - reactjs

Question

I'm trying to enable the keyboard action for my ag-grid.
I have few icons in my ag-grid I'm trying to click the icons through keyboard navigation.
to trigger the event via keyboard navigation I used onCellKeyPress where the user clicks enter key I'll trigger the event.
const onCellKeyPress = useCallback(
(keyPressEvent) => {
if (!isNil(keyPressEvent)) {
const {
event: { key },
colDef: { cellRenderer },
data: { indexId },
} = keyPressEvent;
if (key === ENTER_KEY) {
if (cellRenderer === 'deleteButtonSchemaRenderer') {
deleteRef?.current?.handleClickDeleteRow();
}
}
}
}
,[deleteRef?.current?.handleClickDeleteRow])
in framework component i just import my delete icon react component where i'm just doing the click event.
framework component
const frameworkComponents = useMemo(
() => ({
customNoRowsOverlay: ({
message,
iconName,
className,
}: ISystemNotification) => (
<SystemNotification
message={message}
iconName={iconName}
className={className}
/>
),
deleteButtonRenderer: (props: IDeleteRowButton) => {
const {
node: {
data: { id },
},
} = props;
return (
<DeleteRowButton
{...props}
setIsRowDeleting={setIsRowDeleting}
isDisabled={typeof id !== 'string'}
ref={deleteRef}
/>
);
},
}),
[ setIsRowDeleting]
);
deleterow component
const DeleteRowButton = forwardRef(
(
{ setIsRowDeleting, node, isDisabled = false }: IDeleteRowButton,
ref?: Ref<IUseRef | MutableRefObject<HTMLElement | null>>
) => {
useImperativeHandle(ref, () => ({ handleClickDeleteRow }));
const isRowDeleting = pathOr(false, ['data', 'isDeleting'], node);
const [isDeleting, setIsDeleting] = useState<boolean>(isRowDeleting);
const { t } = useTranslation();
const isGridDataChanged = useSelector(selectIsGridDataChanged);
const onClick = useCallback(
({ node, setIsDeleting, isRowDeleting, setIsRowDeleting, data }) => {
if (!isNil(data)) {
node.data = data;
}
const rowData = node.data;
setIsDeleting(!isRowDeleting);
let updatedData = {};
if (rowData.isDeleting) {
updatedData = { ...rowData, isDeleting: false };
} else {
updatedData = { ...rowData, isDeleting: true };
}
node.setData(updatedData);
setIsRowDeleting(true);
},
[]
);
const handleDeleteRow = useMemo(
() =>
debounce(() => {
onClick({
node,
setIsDeleting,
isRowDeleting,
setIsRowDeleting,
data: null,
});
}, 0),
[isRowDeleting, node, onClick, setIsRowDeleting]
);
const handleClickDeleteRow = useCallback(
(rowData: RowNode) => {
onClick({
node,
setIsDeleting,
isRowDeleting,
setIsRowDeleting,
data: rowData,
});
},
[isRowDeleting, node, onClick, setIsRowDeleting]
);
// Setting row active if changes was canceled
useEffect(() => {
if (!isGridDataChanged && !isRowDeleting && isDeleting) {
setIsDeleting(false);
}
}, [isDeleting, isGridDataChanged, isRowDeleting]);
return (
<Icon
disabled={isDisabled}
onClick={handleDeleteRow}
data-testid={TestIds.DeleteButtonIcon}
icon='trash'
title={t('Delete')}
/>
);
}
);
here it's working fine when the user is clicking via mouse, I'm trying to integrate keyboard action. but it always updates the last row of the ag-grid. I don't know the reason.
can any one help me in this.