Merge pull request #342 from preactjs/virtual-scroll

Author: marvinhagemeister

src/view/components/elements/VirtualizedList.tsx

@@ -34,28 +34,30 @@ export function useVirtualizedList<T>({
 	const timeoutRef = useRef<any>(null);
 	const scrollToItem = useCallback(
 		(item: T) => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+
 			const nextIdx = items.findIndex(t => t === item);
 			if (nextIdx < 0) return;
 
+			// Check if the item we want to scroll to is already in view
 			const pos = Math.floor(nextIdx * rowHeight);
-			if (top > pos || max < pos) {
+			if (scroll > pos || scroll + height < pos) {
 				// Clamp to available range to avoid overflow
 				const maxScroll = Math.floor(rowHeight * items.length - height);
 				const nextPos = Math.max(0, Math.min(pos, maxScroll));
 
 				// Debounce scroll to avoid flickering when quickly hovering
 				// a bunch of elements
-				if (timeoutRef.current) {
-					clearTimeout(timeoutRef.current);
-				}
 				timeoutRef.current = setTimeout(() => {
 					if (container.current) {
 						container.current.scrollTop = nextPos;
 					}
 				}, 100);
 			}
 		},
-		[items],
+		[items, scroll, rowHeight, height],
 	);
 
 	useLayoutEffect(() => {

test-e2e/fixtures/apps/deep-tree-2.jsx

@@ -19,13 +19,31 @@ function Foo() {
 	);
 }
 
+function Bar() {
+	return (
+		<h1 id="bar" data-testid="bar">
+			BAR
+		</h1>
+	);
+}
+
+function Bar2() {
+	return (
+		<h1 id="bar2" data-testid="bar2">
+			BAR 2
+		</h1>
+	);
+}
+
 function App() {
 	return (
 		<Fragment>
 			<ChildItemName>
+				<Bar />
 				<ChildItemName>
 					<ChildItemName>
 						<ChildItemName>
+							<Bar2 />
 							<ChildItemName>
 								<ChildItemName>
 									<ChildItemName>

test-e2e/tests/inspect-virtual-2.test.ts

@@ -0,0 +1,24 @@
+import { newTestPage, installMouseHelper, clickTreeItem } from "../test-utils";
+import { expect } from "chai";
+import { wait } from "pentf/utils";
+
+export const description =
+	"Don't scroll a virtualized element if already visible";
+
+export async function run(config: any) {
+	const { devtools } = await newTestPage(config, "deep-tree-2");
+	await installMouseHelper(devtools);
+
+	const selector = '[data-name="App"]';
+	await devtools.waitForSelector(selector);
+
+	await clickTreeItem(devtools, "Bar");
+
+	await wait(2000);
+
+	const scroll = await devtools.evaluate(() => {
+		return Number(document.querySelector('[data-tree="true"]')?.scrollTop);
+	});
+
+	expect(scroll).to.equal(0);
+}