-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DataGrid] Remove unnecessary keyboard navigation events #6863
Conversation
@@ -55,15 +54,6 @@ function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps) { | |||
? rootProps.components.TreeDataCollapseIcon | |||
: rootProps.components.TreeDataExpandIcon; | |||
|
|||
const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => { | |||
if (event.key === ' ') { | |||
event.stopPropagation(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This event.stopPropagation()
can be removed here because the listener already ignores the space key if it comes from the tree data cell.
mui-x/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
Lines 178 to 181 in 4d77507
const colDef = (params as GridCellParams).colDef; | |
if (colDef && colDef.type === 'treeDataGroup') { | |
break; | |
} |
This also explains its removal from the demos.
@@ -49,6 +49,8 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) { | |||
|
|||
const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => { | |||
if (event.key === ' ') { | |||
// We call event.stopPropagation to avoid unfolding the row and also scrolling to bottom | |||
// TODO: Remove and add a check inside useGridKeyboardNavigation |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm referring to
mui-x/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts
Lines 173 to 181 in 4d77507
case ' ': { | |
const field = (params as GridCellParams).field; | |
if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) { | |
break; | |
} | |
const colDef = (params as GridCellParams).colDef; | |
if (colDef && colDef.type === 'treeDataGroup') { | |
break; | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe create a separate issue for it and link to it in the TODO comment?
These are the results for the performance tests:
|
@@ -49,6 +49,8 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) { | |||
|
|||
const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => { | |||
if (event.key === ' ') { | |||
// We call event.stopPropagation to avoid unfolding the row and also scrolling to bottom | |||
// TODO: Remove and add a check inside useGridKeyboardNavigation |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe create a separate issue for it and link to it in the TODO comment?
Closes #5617
Part of #3287
See #3193 for context
I didn't replace with apiRef methods because, despite the presence of
cellNavigationKeyDown
, the keyboard navigation was already usingcellKeyDown
underneath. The keyboard navigation events are only a proxy. Also, calling an API method would prevent developers from disabling the default handler for the events.Changelog
Breaking changes
cellNavigationKeyDown
event was removed. UsecellKeyDown
and check the key provided in the event argument.columnHeaderNavigationKeyDown
event was removed. UsecolumnHeaderKeyDown
and check the key provided in the event argument.