[data grid] Changing Tab Key for Navigation .

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Summary 💡

In Datagrid , I can go to the next focus input with TAB key.
However , I want to customize the TAB key with the Enter Key

Examples 🌈

No response

Motivation 🔦

No response

Order ID 💳 (optional)

No response

There isn't an easy way to do it, we hardcode the Tab key in a few places. You could try to add capture event listeners to catch those, but it would be quite messy.

Are contributions for making it a custom event key (but the default is Tab) are needed or if there's any Ticket about it ? .
I'd be happy to help.

I'll assume you're referring to navigate between the inputs from a row in edit mode, am I correct? That's the only scenario where we allow Tab. If yes, then you can use the onCellKeyDown prop to intercepts all Tab events and cancel their default behavior. Additionally, you'll have to use this prop again, but intercepting Enter events, and update manually which cell should gain focus. We already do this internally for Tab so there's something you can reuse in

mui-x/packages/grid/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts

Lines 192 to 218 in 725d2cb

    
           const columnFields = gridColumnFieldsSelector(apiRef).filter((field) => { 
        
             const column = apiRef.current.getColumn(field); 
        
             if (column.type === GRID_ACTIONS_COLUMN_TYPE) { 
        
               return true; 
        
             } 
        
             return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field)); 
        
           }); 
        
           if (event.shiftKey) { 
        
             if (params.field === columnFields[0]) { 
        
               // Exit if user pressed Shift+Tab on the first field 
        
               reason = GridRowEditStopReasons.shiftTabKeyDown; 
        
             } 
        
           } else if (params.field === columnFields[columnFields.length - 1]) { 
        
             // Exit if user pressed Tab on the last field 
        
             reason = GridRowEditStopReasons.tabKeyDown; 
        
           } 
        
           // Always prevent going to the next element in the tab sequence because the focus is 
        
           // handled manually to support edit components rendered inside Portals 
        
           event.preventDefault(); 
        
           if (!reason) { 
        
             const index = columnFields.findIndex((field) => field === params.field); 
        
             const nextFieldToFocus = columnFields[event.shiftKey ? index - 1 : index + 1]; 
        
             apiRef.current.setCellFocus(params.id, nextFieldToFocus); 
        
           }

Since Enter is also used to save the row, you need to also cancel the default behavior and provide an alternative to save the row, e.g. a save button.

Thanks ! I will try to use the same logic used for Tab events on Enter Key .
If you accept contributions for making the Tab customizable , I'd be happy to raise a PR.
If not , please keep this issue open for now.

If other users manifest interest in having an option to customize Tab, then we can accept a contribution. I'll keep this issue open.

Status update after triage: this is still not implemented. The grid hardcodes the Tab key for field navigation in row edit mode, and no key-remapping API exists.

Two related notes:

The workaround from this comment still works: intercept the keys with onCellKeyDown, set event.defaultMuiPrevented = true, and move the focus manually.
Since v8.19.0, the tabNavigation prop ([DataGrid] Add tabNavigation prop to control tab navigation in the grid #20286) controls Tab navigation across cells and headers. It does not remap keys, so it solves a different problem.

The issue stays open and waits for more upvotes.

We discussed this internally. Since this is open for quite some time now and only gained 10 upvotes we will not implement a key re-mapping feature. Instead we recommend using the approach shared here for any customization regarding key-handling in cells.

Navigation Menu

Repository navigation

[data grid] Changing Tab Key for Navigation . #9415

Duplicates

Latest version

Summary 💡

Examples 🌈

Motivation 🔦

Order ID 💳 (optional)

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

	const columnFields = gridColumnFieldsSelector(apiRef).filter((field) => {
	const column = apiRef.current.getColumn(field);
	if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
	return true;
	}
	return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
	});

	if (event.shiftKey) {
	if (params.field === columnFields[0]) {
	// Exit if user pressed Shift+Tab on the first field
	reason = GridRowEditStopReasons.shiftTabKeyDown;
	}
	} else if (params.field === columnFields[columnFields.length - 1]) {
	// Exit if user pressed Tab on the last field
	reason = GridRowEditStopReasons.tabKeyDown;
	}

	// Always prevent going to the next element in the tab sequence because the focus is
	// handled manually to support edit components rendered inside Portals
	event.preventDefault();

	if (!reason) {
	const index = columnFields.findIndex((field) => field === params.field);
	const nextFieldToFocus = columnFields[event.shiftKey ? index - 1 : index + 1];
	apiRef.current.setCellFocus(params.id, nextFieldToFocus);
	}

[data grid] Changing Tab Key for Navigation . #9415

Description

Duplicates

Latest version

Summary 💡

Examples 🌈

Motivation 🔦

Order ID 💳 (optional)

Activity

romgrk commented on Jun 21, 2023

Safouene1 commented on Jun 22, 2023

m4theushw commented on Jun 22, 2023

Safouene1 commented on Jun 22, 2023

m4theushw commented on Jun 22, 2023

michelengelen commented on Sep 2, 2026

michelengelen commented on Oct 30, 2026

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions