V9 Datagrid TabIndex - Help

[mrmwink]

Hi,

So I have a basic DataGrid where I am rendering the cell with a Input component, I have set TabIndex in the Input in the hope that I would be able to simply tab between cells in the row and then for it to move onto the next row etc, but I am not getting any tabbing, if I select a cell and edit the value when I tab out it tabs off of the DataGrid component completely, not the next cell as I would expect?

Am I missing something!?

Thanks

Mike

[ValentinaKozlova]

Hey @mrmwink,
By default, tabbing behavior in a DataGrid does not automatically handle navigation between cells or rows unless explicitly configured.
In Fluent UI's DataGrid, this behavior can be controlled using the focusMode property on DataGridCell and utilities like useArrowNavigationGroup or useFocusableGroup. These tools are designed to manage keyboard navigation within the grid, ensuring that focus moves logically between cells and rows.
Try set focusMode="group" for cells containing Input components.

<DataGridCell focusMode="group">
    <Input tabIndex={0} />
</DataGridCell>

useArrowNavigationGroup hook ensures that arrow keys and Tab behave as expected, moving focus between cells and rows.

import { useArrowNavigationGroup } from '@fluentui/react-components';

const gridNavigationProps = useArrowNavigationGroup({ axis: 'grid' });

<DataGrid {...gridNavigationProps}>
    {/* DataGrid content */}
</DataGrid>

If this is not helping, feel free to provide reproducible enviromnent (e.g. Stackblitz link).
This was we'll be able to help you better