I've tried to add onKeyDown event for Cell component in several ways, but none worked. At first I put onkeydown on div here, just like the rest of events here. I also added tabindex=0 to div. Then put it on ref.
It would be nice to know if somebody had experience. This cell component is mine and it look a lot like original in source file of datagrid.
Cell component:
function selectCell(openEditor?: boolean) {
eventBus.dispatch(
'SELECT_CELL',
{ idx: column.idx, rowIdx: currentRowIdx },
openEditor,
);
}
function handleCellClick() {
selectCell();
if (onRowClick) {
onRowClick(currentRowIdx, row, column);
}
}
function handleCellContextMenu() {
selectCell();
}
function handleCellDoubleClick() {
selectCell(true);
}
function onRowSelectionChange(checked: boolean, isShiftClick: boolean) {
eventBus.dispatch('SELECT_ROW', {
rowIdx: currentRowIdx,
checked,
isShiftClick,
});
}
return (
<div
className={cn('rdg-cell', column.cellClass, {
'rdg-cell-frozen': column.frozen,
'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex,
[cnCellValueError]: !!error,
})}
style={{
width: column.width,
left: column.left,
}}
onClick={wrapEvent(handleCellClick, onClick)}
onDoubleClick={wrapEvent(handleCellDoubleClick, onDoubleClick)}
onContextMenu={wrapEvent(handleCellContextMenu, onContextMenu)}
onMouseEnter={() => setIsShowError(true)}
onMouseLeave={() => setIsShowError(false)}
onDragOver={wrapEvent(preventDefault, onDragOver)}
ref={combinedRef}
>
{React.createElement(column.formatter, {
column,
rowIdx: currentRowIdx,
row,
isRowSelected,
onRowSelectionChange,
})}
{isShowError && error && (
<Tooltip
size="s"
anchorRef={innerRef as RefObject<HTMLDivElement>}
direction="rightCenter"
>
{error.message}
</Tooltip>
)}
</div>
);
});