Skip to content

Refactor useRovingCellRef, fix test warnings #2883

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

Merged
merged 4 commits into from
Apr 7, 2022
Merged

Refactor useRovingCellRef, fix test warnings #2883

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e804f7
Refactor useRovingCellRef, fix test warnings
nstepien Apr 7, 2022
a07b3ed
optimize
nstepien Apr 7, 2022
3763416
lazy focus listening
nstepien Apr 7, 2022
00a999c
fix type issue
nstepien Apr 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 16 additions & 21 deletions src/hooks/useRovingCellRef.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,30 @@
import { useRef, useState } from 'react';
import { useLayoutEffect } from './useLayoutEffect';
import { useCallback, useState } from 'react';

// https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex
export function useRovingCellRef(isSelected: boolean) {
const ref = useRef<HTMLDivElement>(null);
// https://www.w3.org/TR/wai-aria-practices-1.1/#gridNav_focus
const isChildFocused = useRef(false);
const [, forceRender] = useState<unknown>({});
const [isChildFocused, setIsChildFocused] = useState(false);

useLayoutEffect(() => {
if (!isSelected) {
isChildFocused.current = false;
return;
}
if (isChildFocused && !isSelected) {
setIsChildFocused(false);
}

if (isChildFocused.current) {
// When the child is focused, we need to rerender
// the cell again so tabIndex is updated to -1
forceRender({});
return;
}
ref.current?.focus({ preventScroll: true });
}, [isSelected]);
const ref = useCallback(
(cell: HTMLDivElement | null) => {
if (cell === null || !isSelected || cell.contains(document.activeElement)) return;

cell.focus({ preventScroll: true });
Copy link
Collaborator

@amanmahajan7 amanmahajan7 Apr 7, 2022

Choose a reason for hiding this comment

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

My only concern is if it is possible to have a stale ref in a ref callback. Not sure why is useLayoutEffect is the recommended approach

Copy link
Collaborator Author

@nstepien nstepien Apr 7, 2022

Choose a reason for hiding this comment

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

WDYM by stale ref?
useLayoutEffect would use that same ref anyway.

},
[isSelected]
);

function onFocus(event: React.FocusEvent<HTMLDivElement>) {
if (event.target !== ref.current) {
isChildFocused.current = true;
if (event.target !== event.currentTarget) {
setIsChildFocused(true);
}
}

const isFocused = isSelected && !isChildFocused.current;
const isFocused = isSelected && !isChildFocused;

return {
ref,
Expand Down
19 changes: 11 additions & 8 deletions test/components.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { StrictMode } from 'react';
import { forwardRef, StrictMode } from 'react';
import { render, screen } from '@testing-library/react';

import DataGrid, { DataGridDefaultComponentsProvider, SelectColumn } from '../src';
import type { Column, DataGridProps } from '../src';
import type { Column, DataGridProps, CheckboxFormatterProps } from '../src';
import { getRows, setup } from './utils';

interface Row {
Expand All @@ -25,13 +25,16 @@ function GlobalNoRowsFallback() {
return <div>Global no rows fallback</div>;
}

function Checkbox() {
return <div>Local checkbox</div>;
}
const Checkbox = forwardRef<HTMLDivElement, CheckboxFormatterProps>(function Checkbox(props, ref) {
return <div ref={ref}>Local checkbox</div>;
});

function GlobalCheckbox() {
return <div>Global checkbox</div>;
}
const GlobalCheckbox = forwardRef<HTMLDivElement, CheckboxFormatterProps>(function GlobalCheckbox(
props,
ref
) {
return <div ref={ref}>Global checkbox</div>;
});

function setupProvider<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>) {
return render(
Expand Down