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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix autoscroll bugs that cause wonkly behaviors #835

Merged
merged 2 commits into from Dec 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/core/src/data-editor/data-editor.tsx
Expand Up @@ -2518,14 +2518,14 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
let [col, row] = args.location;
const visible = visibleRegionRef.current;
if (xDir === -1) {
col = visible.x;
col = visible.extras?.freezeRegion?.x ?? visible.x;
jassmith marked this conversation as resolved.
Show resolved Hide resolved
} else if (xDir === 1) {
col = visible.x + visible.width;
}
if (yDir === -1) {
row = Math.max(0, visible.y);
} else if (yDir === 1) {
row = Math.min(rows, visible.y + visible.height);
row = Math.min(rows - 1, visible.y + visible.height);
jassmith marked this conversation as resolved.
Show resolved Hide resolved
}
onItemHoveredImpl({
...args,
Expand Down
3 changes: 1 addition & 2 deletions packages/core/src/internal/data-grid/data-grid.tsx
Expand Up @@ -515,7 +515,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
const isTouch = (ev !== undefined && !(ev instanceof MouseEvent)) || (ev as any)?.pointerType === "touch";

const scrollEdge: GridMouseEventArgs["scrollEdge"] = [
x < stickyX ? -1 : rect.width < x ? 1 : 0,
x < 0 ? -1 : rect.width < x ? 1 : 0,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ideally this would know if the current selection is inside the freeze region or not, but since this is not currently known in this region of the code I didn't want to plumb it through. We could then conditionally scroll. For now however this will have to do.

Copy link
Collaborator

Choose a reason for hiding this comment

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

What would be the benefit if we would know the freeze region here? Are there any problematic scenarios with just doing x < 0?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Good catch. I initially used stickyX since I wanted autoscroll to occur when the cursor is over the rowMarkers, similar to how it vertically scrolls if you're in the column headers.

But yeah, stickyX isn't the right prop for it since it's dependent on fixedShadowX = true.

const stickyX = fixedShadowX ? getStickyWidth(mappedColumns, dragAndDropState) : 0;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The problematic scenario here is that with x < 0 you don't get autoscroll until you rmouse leaves the grid entirely. Ideally auto-scroll would start if you go over a sticky column and the current selected cell is not in the sticky region.

y < totalHeaderHeight ? -1 : rect.height < y ? 1 : 0,
];

Expand Down Expand Up @@ -655,7 +655,6 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
getBoundsForItem,
fillHandle,
selection,
stickyX,
totalHeaderHeight,
]
);
Expand Down