Skip to content
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

Merged
merged 1 commit into from
Nov 23, 2022

Conversation

m4theushw
Copy link
Member

Closes #5617

Part of #3287

See #3193 for context

On v6 I think we should replace the cellNavigationKeyDown and columnHeaderNavigationKeyDown with apiRef methods.
For me events should be "hey I did X, do whatever you want with this information" not "hey, could someone listen to me and do X".

I didn't replace with apiRef methods because, despite the presence of cellNavigationKeyDown, the keyboard navigation was already using cellKeyDown 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

  • The cellNavigationKeyDown event was removed. Use cellKeyDown and check the key provided in the event argument.
  • The columnHeaderNavigationKeyDown event was removed. Use columnHeaderKeyDown and check the key provided in the event argument.

@m4theushw m4theushw added breaking change component: data grid This is the name of the generic UI component, not the React module! labels Nov 15, 2022
@@ -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();
Copy link
Member Author

@m4theushw m4theushw Nov 15, 2022

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.

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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm referring to

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;
}

Copy link
Member

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?

@mui-bot
Copy link

mui-bot commented Nov 16, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-6863--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 657 1,334.5 657 908.2 292.233
Sort 100k rows ms 600.1 1,295.6 1,295.6 972.54 264.985
Select 100k rows ms 255.7 396.3 294.9 322.2 52.408
Deselect 100k rows ms 153.8 285.3 195.5 205.32 44.276

Generated by 🚫 dangerJS against e423296

@@ -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
Copy link
Member

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?

@m4theushw m4theushw merged commit 2b85f79 into mui:next Nov 23, 2022
@m4theushw m4theushw deleted the remove-keyboard-nav-events branch November 23, 2022 12:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Remove the NavigationKeyDown events
3 participants