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

Add basic keyboard navigation tests #2289

Merged
merged 4 commits into from
Jan 21, 2021
Merged

Add basic keyboard navigation tests #2289

merged 4 commits into from
Jan 21, 2021

Conversation

nstepien
Copy link
Contributor

No description provided.

@nstepien nstepien self-assigned this Jan 19, 2021
Copy link
Contributor

@amanmahajan7 amanmahajan7 left a comment

Choose a reason for hiding this comment

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

Good tests 👍

src/DataGrid.tsx Outdated
@@ -375,6 +375,16 @@ function DataGrid<R, SR>({
onExpandedGroupIdsChange(newExpandedGroupIds);
}

// Tabbing into the grid should initiate keyboard navigation
Copy link
Contributor

Choose a reason for hiding this comment

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

👍 We also need to scroll to the selected cell in case is not visible. Consider a case

  • Select a cell
  • Scroll the grid so cell is not visible
  • Focus on any element outside the grid
  • Tab into the grid
  • Grid only scrolls when the selected position is changed

May be we can do something like

const selectedPositionOnFocus = selectedPosition.idx === -1 ? { idx: 0, rowIdx: 0, mode: 'SELECT' } : { ...selectedPosition };
if (isCellWithinBounds(selectedPositionOnFocus)) {
    setSelectedPosition(selectedPositionOnFocus);
}

Wdyt?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Clicking anywhere on the grid triggers the blur event on the focus sink, which we then focus immediately after, triggering the focus handler, so that might not be desired.
We can prevent blur by preventDefault()ing the mousedown event, but that'll break other stuff as well.
Not sure if this is doable.

@amanmahajan7 amanmahajan7 merged commit e5abec0 into canary Jan 21, 2021
@amanmahajan7 amanmahajan7 deleted the keebnav branch January 21, 2021 16:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants