Skip to content

[DataGrid] Prevent column header scroll #4280

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 5 commits into from
Apr 11, 2022
Merged

[DataGrid] Prevent column header scroll #4280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
65cf41c
[DataGrid] Prevent column header scroll
m4theushw Mar 25, 2022
1e2e95d
Revert changes
m4theushw Mar 28, 2022
ec9ed8b
Use field as key
m4theushw Mar 28, 2022
8e76c0a
Merge branch 'master' into prevent-column-header-scroll
m4theushw Apr 11, 2022
d420045
rerun ci
m4theushw Apr 11, 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
20 changes: 20 additions & 0 deletions packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,26 @@ describe('<DataGridPro /> - Column Headers', () => {
],
};

it('should not scroll the column headers when a column is focused', function test() {
if (isJSDOM) {
this.skip(); // JSDOM version of .focus() doesn't scroll
}
render(
<div style={{ width: 102, height: 500 }}>
<DataGridPro
{...baselineProps}
columns={[{ field: 'brand' }, { field: 'foundationYear' }]}
/>
</div>,
);
const columnHeaders = document.querySelector('.MuiDataGrid-columnHeaders')!;
expect(columnHeaders.scrollLeft).to.equal(0);
const columnCell = getColumnHeaderCell(0);
columnCell.focus();
fireEvent.keyDown(columnCell, { key: 'End' });
expect(columnHeaders.scrollLeft).to.equal(0);
});

describe('GridColumnHeaderMenu', () => {
it('should close the menu when the window is scrolled', () => {
render(
Expand Down
10 changes: 4 additions & 6 deletions packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,13 +207,11 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
const columnMenuState = apiRef.current.state.columnMenu;
if (hasFocus && !columnMenuState.open) {
const focusableElement = headerCellRef.current!.querySelector<HTMLElement>('[tabindex="0"]');
if (focusableElement) {
focusableElement!.focus();
} else {
headerCellRef.current!.focus();
}
const elementToFocus = focusableElement || headerCellRef.current;
elementToFocus?.focus();
apiRef.current.columnHeadersContainerElementRef!.current!.scrollLeft = 0;
}
});
}, [apiRef, hasFocus]);

const headerClassName =
typeof column.headerClassName === 'function'
Expand Down
6 changes: 2 additions & 4 deletions packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,11 @@ const GridColumnHeadersRoot = styled('div', {
};
});

interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
innerRef?: React.Ref<HTMLDivElement>;
}
interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {}

export const GridColumnHeaders = React.forwardRef<HTMLDivElement, GridColumnHeadersProps>(
function GridColumnHeaders(props, ref) {
const { innerRef, className, ...other } = props;
const { className, ...other } = props;
const rootProps = useGridRootProps();

const ownerState = { classes: rootProps.classes };
Expand Down
2 changes: 1 addition & 1 deletion packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {

columns.push(
<GridColumnHeaderItem
key={i}
key={column.field}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Prevents the effect triggering twice.

{...sortColumnLookup[column.field]}
columnMenuOpen={open}
filterItemsCounter={
Expand Down