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.

Sign up for GitHub

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

Jump to bottom

[DataGrid] Allow to navigate between cells with keyboard once inside an actions column #3375

Merged
merged 4 commits into from
Feb 18, 2022
Merged

[DataGrid] Allow to navigate between cells with keyboard once inside an actions column #3375

merged 4 commits into from
Feb 18, 2022

Conversation

m4theushw
Copy link
Member

@m4theushw m4theushw commented Dec 7, 2021 •
edited
Loading

@m4theushw m4theushw added on hold There is a blocker, we need to wait bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! labels Dec 7, 2021
@Edelf
Copy link

Edelf commented Dec 8, 2021 •
edited
Loading

@m4theushw it seems that if you navigate in & out of the action column, the ripple/focus effect keeps on stacking:
image

@m4theushw
Copy link
Member Author

@Edelf Yes, that's the reason of the "PR: on hold" label. I won't merge this without #2998. The ripple stacking also happens in the checkbox column.

@m4theushw m4theushw self-assigned this Dec 14, 2021
@github-actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 14, 2021
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 24, 2021
@github-actions
Copy link

github-actions bot commented Jan 7, 2022

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 7, 2022
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 17, 2022
@mui-bot
Copy link

mui-bot commented Jan 17, 2022 •
edited
Loading

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 204.4 400.8 302.3 292.64 65.255
Sort 100k rows ms 394.5 833.9 624.8 600.66 169.994
Select 100k rows ms 142.6 315.2 181 211.46 61.209
Deselect 100k rows ms 106.9 295.3 140.9 169.78 67.172

Generated by 🚫 dangerJS against 69bc8d7

@flaviendelangle flaviendelangle marked this pull request as draft January 18, 2022 09:49
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 19, 2022
@github-actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@siriwatknp
Copy link
Member

siriwatknp commented Feb 8, 2022 •
edited
Loading

👋 The migration PR has been merged.

Please follow these steps to make sure that the contents are all updated. (Sorry for the inconvenience)

  1. pull latest master from upstream to your branch
  2. if your PR has changes on the *.md or demo files, you are likely to encounter conflict because all of them have been moved to the new folder.
    2.1 revert the change on those markdown files you did
    2.2 pull latest master from upstream (you should not see conflict)
    2.3 make the changes again at docs/data/data-grid/*
  3. run yarn docs:api
    • you might see the changes in docs/pages/data-grid/api/* if your PR touches some of the components
    • it is okay if there is no changes

If you are struggle with the steps above, feel free to tag @siriwatknp

@m4theushw m4theushw mentioned this pull request Feb 11, 2022
Merged
@m4theushw m4theushw force-pushed the keyboard-navigation-actions branch from 62426a3 to 0656edf Compare February 11, 2022 20:11
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 11, 2022
@m4theushw m4theushw force-pushed the keyboard-navigation-actions branch from 0656edf to 7aeb935 Compare February 11, 2022 20:22
@m4theushw m4theushw force-pushed the keyboard-navigation-actions branch from 7aeb935 to 66c5471 Compare February 11, 2022 21:10
@m4theushw m4theushw marked this pull request as ready for review February 11, 2022 21:23
m4theushw
m4theushw commented Feb 11, 2022
View reviewed changes
packages/grid/_modules_/grid/components/cell/GridActionsCell.tsx Outdated
React.useLayoutEffect(() => {
if (!hasFocus) {
Object.entries(touchRippleRefs.current).forEach(([index, ref]) => {
ref?.stop({}, () => {
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 had to adapt the same workaround from #3835.

packages/grid/_modules_/grid/components/cell/GridActionsCell.tsx Outdated
@@ -12,16 +12,32 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
const hasActions = (colDef: any): colDef is GridActionsColDef =>
typeof colDef.getActions === 'function';

type GridActionsCellProps = Pick<GridRenderCellParams, 'colDef' | 'id' | 'api'> &
interface TouchRippleActions {
Copy link
Member Author

Choose a reason for hiding this comment

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

Not exported.

@m4theushw m4theushw removed the on hold There is a blocker, we need to wait label Feb 11, 2022
@alexfauquette
Copy link
Member

Nice 👍

To improve accessibility, the menu in GridActionCell should have autoFocus. Otherwise, it is not possible to access its items with keyboard

missing autofocus

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 14, 2022
@github-actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@m4theushw m4theushw mentioned this pull request Feb 14, 2022
Closed
2 tasks
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 15, 2022
alexfauquette
alexfauquette approved these changes Feb 16, 2022
View reviewed changes
packages/grid/_modules_/grid/components/cell/GridActionsCellItem.tsx Outdated
@@ -16,8 +16,6 @@ const GridActionsCellItem = (props: GridActionsCellItemProps) => {
const { label, icon, showInMenu, onClick, ...other } = props;

const handleClick = (event: any) => {
event.stopPropagation();
Copy link
Member

Choose a reason for hiding this comment

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

<3

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 17, 2022
@github-actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 18, 2022
@m4theushw m4theushw merged commit 31ad9c5 into mui:master Feb 18, 2022
@m4theushw m4theushw deleted the keyboard-navigation-actions branch February 18, 2022 18:10
@m4theushw m4theushw mentioned this pull request Mar 2, 2022
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alexfauquette alexfauquette alexfauquette approved these changes

@DanailH DanailH DanailH approved these changes

Assignees

@m4theushw m4theushw

Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[DataGrid] Arrow navigation stuck in Action Cells
6 participants
@m4theushw @Edelf @mui-bot @siriwatknp @alexfauquette @DanailH