diff --git a/src/core/store.ts b/src/core/store.ts index 1bd9b533a..29870c04b 100644 --- a/src/core/store.ts +++ b/src/core/store.ts @@ -110,7 +110,6 @@ export const createVirtualStore = ( let _smoothScrollRange: ItemsRange | null = null; let _maybeJumped = false; let _prevRange: ItemsRange = [0, initialItemCount]; - let _initialRendered = true; const subscribers = new Set<[number, Subscriber]>(); const getScrollSize = (): number => @@ -224,13 +223,9 @@ export const createVirtualStore = ( ([index, size]) => cache._sizes[index] !== size ); // Skip if all items are cached and not updated - if ( - !updated.length && - !_initialRendered - ) { + if (!updated.length) { break; } - _initialRendered = false; // Calculate jump // Should maintain visible position to minimize junks in appearance diff --git a/src/react/VGrid.tsx b/src/react/VGrid.tsx index 0f8005c31..be3fbb74c 100644 --- a/src/react/VGrid.tsx +++ b/src/react/VGrid.tsx @@ -273,9 +273,6 @@ export const VGrid = forwardRef( useIsomorphicLayoutEffect(() => { const root = rootRef[refKey]!; - const cleanUpResizer = resizer._observeRoot(root); - const cleanupVScroller = vScroller._initRoot(root); - const cleanupHScroller = hScroller._initRoot(root); const onRerender = (sync?: boolean) => { if (sync) { flushSync(rerender); @@ -283,6 +280,7 @@ export const VGrid = forwardRef( rerender(); } }; + // store must be subscribed first because others may dispatch update on init depending on implementation const unsubscribeVStore = vStore._subscribe( UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, onRerender @@ -291,12 +289,15 @@ export const VGrid = forwardRef( UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, onRerender ); + const cleanUpResizer = resizer._observeRoot(root); + const cleanupVScroller = vScroller._initRoot(root); + const cleanupHScroller = hScroller._initRoot(root); return () => { + unsubscribeVStore(); + unsubscribeHStore(); cleanUpResizer(); cleanupVScroller(); cleanupHScroller(); - unsubscribeVStore(); - unsubscribeHStore(); }; }, []); diff --git a/src/react/VList.spec.tsx b/src/react/VList.spec.tsx index 086e266eb..6df2429c9 100644 --- a/src/react/VList.spec.tsx +++ b/src/react/VList.spec.tsx @@ -104,7 +104,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(1); + expect(rootFn).toBeCalledTimes(2); itemFns.forEach((itemFn) => { expect(itemFn).toHaveBeenCalledTimes(1); }); @@ -130,7 +130,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(1); + expect(rootFn).toBeCalledTimes(3); itemFns.forEach((itemFn) => { expect(itemFn.mock.calls.length).toBeLessThanOrEqual(1); }); @@ -185,7 +185,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(1); + expect(rootFn).toBeCalledTimes(2); itemFns.forEach((itemFn, i) => { expect(itemFn).toBeCalledTimes(i === itemFns.length - 1 ? 0 : 1); }); @@ -240,7 +240,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(2); + expect(rootFn).toBeCalledTimes(3); itemFns.forEach((itemFn) => { expect(itemFn.mock.calls.length).toBeLessThanOrEqual(2); // TODO: should be 1 }); diff --git a/src/react/VList.tsx b/src/react/VList.tsx index 9e6388332..5f38fdd1c 100644 --- a/src/react/VList.tsx +++ b/src/react/VList.tsx @@ -232,8 +232,7 @@ export const VList = forwardRef( useIsomorphicLayoutEffect(() => { const root = rootRef[refKey]!; - const cleanupResizer = resizer._observeRoot(root); - const cleanupScroller = scroller._initRoot(root); + // store must be subscribed first because others may dispatch update on init depending on implementation const unsubscribeStore = store._subscribe( UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, (sync) => { @@ -250,11 +249,13 @@ export const VList = forwardRef( onScroll[refKey] && onScroll[refKey](store._getScrollOffset()); } ); + const cleanupResizer = resizer._observeRoot(root); + const cleanupScroller = scroller._initRoot(root); return () => { - cleanupResizer(); - cleanupScroller(); unsubscribeStore(); unsubscribeOnScroll(); + cleanupResizer(); + cleanupScroller(); }; }, []); diff --git a/src/react/WVList.spec.tsx b/src/react/WVList.spec.tsx index 019e26bca..2574367c4 100644 --- a/src/react/WVList.spec.tsx +++ b/src/react/WVList.spec.tsx @@ -112,7 +112,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(1); + expect(rootFn).toBeCalledTimes(2); itemFns.forEach((itemFn) => { expect(itemFn).toHaveBeenCalledTimes(1); }); @@ -138,7 +138,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(1); + expect(rootFn).toBeCalledTimes(3); itemFns.forEach((itemFn) => { expect(itemFn.mock.calls.length).toBeLessThanOrEqual(1); }); @@ -193,7 +193,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(1); + expect(rootFn).toBeCalledTimes(2); itemFns.forEach((itemFn, i) => { expect(itemFn).toBeCalledTimes(i === itemFns.length - 1 ? 0 : 1); }); @@ -248,7 +248,7 @@ describe("render count", () => { ); - expect(rootFn).toBeCalledTimes(2); + expect(rootFn).toBeCalledTimes(3); itemFns.forEach((itemFn) => { expect(itemFn.mock.calls.length).toBeLessThanOrEqual(2); // TODO: should be 1 }); diff --git a/src/react/WVList.tsx b/src/react/WVList.tsx index 50a03eb2f..e98b4a179 100644 --- a/src/react/WVList.tsx +++ b/src/react/WVList.tsx @@ -186,8 +186,7 @@ export const WVList = forwardRef( useIsomorphicLayoutEffect(() => { const root = rootRef[refKey]!; - const cleanupResizer = resizer._observeRoot(root); - const cleanupScroller = scroller._initRoot(root); + // store must be subscribed first because others may dispatch update on init depending on implementation const unsubscribeStore = store._subscribe( UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, (sync) => { @@ -198,10 +197,12 @@ export const WVList = forwardRef( } } ); + const cleanupResizer = resizer._observeRoot(root); + const cleanupScroller = scroller._initRoot(root); return () => { + unsubscribeStore(); cleanupResizer(); cleanupScroller(); - unsubscribeStore(); }; }, []); diff --git a/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap b/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap index c87ddb400..15b642408 100644 --- a/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap +++ b/src/react/__snapshots__/VGrid.rtl.spec.tsx.snap @@ -6,71 +6,120 @@ exports[`rtl should work 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
diff --git a/src/react/__snapshots__/VGrid.spec.tsx.snap b/src/react/__snapshots__/VGrid.spec.tsx.snap index 243cb7008..bd6d4321e 100644 --- a/src/react/__snapshots__/VGrid.spec.tsx.snap +++ b/src/react/__snapshots__/VGrid.spec.tsx.snap @@ -6,10 +6,10 @@ exports[`grid should render 1 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
0 / 0 @@ -26,71 +26,120 @@ exports[`grid should render 4x4 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
@@ -102,71 +151,120 @@ exports[`grid should render 100x100 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
@@ -178,71 +276,120 @@ exports[`grid should render 1000x1000 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
@@ -254,71 +401,120 @@ exports[`grid should render 10000x10000 children 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
@@ -330,71 +526,120 @@ exports[`grid should render component 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
@@ -406,10 +651,10 @@ exports[`grid should render fragments 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
fragment @@ -422,7 +667,7 @@ exports[`grid should render fragments 1`] = `
fragment @@ -439,18 +684,21 @@ exports[`grid should render non elements 1`] = ` style="overflow: auto; contain: strict; width: 100%; height: 100%;" >
string
+
@@ -463,71 +711,120 @@ exports[`grid should render with given width / height 1`] = ` style="overflow: auto; contain: strict; width: 100px; height: 100px;" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
@@ -544,71 +841,120 @@ exports[`should pass attributes to element 1`] = ` tabindex="0" >
0 / 0
0 / 1
0 / 2
+
+ 0 / 3 +
+
+
1 / 0
1 / 1
1 / 2
+
+ 1 / 3 +
+
+
2 / 0
2 / 1
2 / 2
+
+
+ 2 / 3 +
+
+
+
+ 3 / 0 +
+
+
+
+ 3 / 1 +
+
+
+
+ 3 / 2 +
+
+
+
+ 3 / 3 +
+
diff --git a/src/react/__snapshots__/VList.rtl.spec.tsx.snap b/src/react/__snapshots__/VList.rtl.spec.tsx.snap index 910183175..3dac9f980 100644 --- a/src/react/__snapshots__/VList.rtl.spec.tsx.snap +++ b/src/react/__snapshots__/VList.rtl.spec.tsx.snap @@ -6,43 +6,50 @@ exports[`rtl should not work in vertical 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
0
1
2
3
4
+
+
+ 5 +
+
@@ -54,43 +61,50 @@ exports[`rtl should work in horizontal 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
0
1
2
3
4
+
+
+ 5 +
+
diff --git a/src/react/__snapshots__/VList.spec.tsx.snap b/src/react/__snapshots__/VList.spec.tsx.snap index 87909efb0..ce80a9714 100644 --- a/src/react/__snapshots__/VList.spec.tsx.snap +++ b/src/react/__snapshots__/VList.spec.tsx.snap @@ -6,10 +6,10 @@ exports[`horizontal should render 1 children 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
0 @@ -26,38 +26,38 @@ exports[`horizontal should render 5 children 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
0
1
2
3
4 @@ -74,43 +74,50 @@ exports[`horizontal should render 100 children 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
0
1
2
3
4
+
+
+ 5 +
+
@@ -122,43 +129,50 @@ exports[`horizontal should render 1000 children 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
0
1
2
3
4
+
+
+ 5 +
+
@@ -170,43 +184,50 @@ exports[`horizontal should render 10000 children 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
0
1
2
3
4
+
+
+ 5 +
+
@@ -218,24 +239,24 @@ exports[`horizontal should render component 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
component
component
component @@ -252,10 +273,10 @@ exports[`horizontal should render fragments 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
fragment @@ -268,7 +289,7 @@ exports[`horizontal should render fragments 1`] = `
fragment @@ -285,15 +306,15 @@ exports[`horizontal should render non elements 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100%; height: 100%;" >
string
123
@@ -308,38 +329,38 @@ exports[`horizontal should render with given width / height 1`] = ` style="overflow-x: auto; display: inline-block; contain: strict; width: 100px; height: 800px;" >
0
1
2
3
4 @@ -356,43 +377,50 @@ exports[`reverse should render many items 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
0
1
2
3
4
+
+
+ 5 +
+
@@ -404,38 +432,38 @@ exports[`should change components 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
  • 0
  • 1
  • 2
  • 3
  • 4 @@ -457,10 +485,10 @@ exports[`should pass attributes to element 1`] = ` tabindex="0" >
    0 @@ -477,7 +505,7 @@ exports[`vertical should render 0 children 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    @@ -489,10 +517,10 @@ exports[`vertical should render 1 children 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    0 @@ -509,38 +537,38 @@ exports[`vertical should render 5 children 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    0
    1
    2
    3
    4 @@ -557,43 +585,50 @@ exports[`vertical should render 100 children 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    @@ -605,43 +640,50 @@ exports[`vertical should render 1000 children 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    @@ -653,43 +695,50 @@ exports[`vertical should render 10000 children 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    @@ -701,24 +750,24 @@ exports[`vertical should render component 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    component
    component
    component @@ -735,10 +784,10 @@ exports[`vertical should render fragments 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    fragment @@ -751,7 +800,7 @@ exports[`vertical should render fragments 1`] = `
    fragment @@ -768,15 +817,15 @@ exports[`vertical should render non elements 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100%; height: 100%;" >
    string
    123
    @@ -791,38 +840,38 @@ exports[`vertical should render with given width / height 1`] = ` style="overflow-y: auto; display: block; contain: strict; width: 100px; height: 800px;" >
    0
    1
    2
    3
    4 diff --git a/src/react/__snapshots__/WVList.rtl.spec.tsx.snap b/src/react/__snapshots__/WVList.rtl.spec.tsx.snap index 6437e6fd3..b6b11e49c 100644 --- a/src/react/__snapshots__/WVList.rtl.spec.tsx.snap +++ b/src/react/__snapshots__/WVList.rtl.spec.tsx.snap @@ -6,43 +6,148 @@ exports[`rtl should not work in vertical 1`] = ` style="display: block; width: 100%; height: auto;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    +
    +
    + 6 +
    +
    +
    +
    + 7 +
    +
    +
    +
    + 8 +
    +
    +
    +
    + 9 +
    +
    +
    +
    + 10 +
    +
    +
    +
    + 11 +
    +
    +
    +
    + 12 +
    +
    +
    +
    + 13 +
    +
    +
    +
    + 14 +
    +
    +
    +
    + 15 +
    +
    +
    +
    + 16 +
    +
    +
    +
    + 17 +
    +
    +
    +
    + 18 +
    +
    +
    +
    + 19 +
    +
    @@ -54,43 +159,113 @@ exports[`rtl should work in horizontal 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    +
    +
    + 6 +
    +
    +
    +
    + 7 +
    +
    +
    +
    + 8 +
    +
    +
    +
    + 9 +
    +
    +
    +
    + 10 +
    +
    +
    +
    + 11 +
    +
    +
    +
    + 12 +
    +
    +
    +
    + 13 +
    +
    +
    +
    + 14 +
    +
    diff --git a/src/react/__snapshots__/WVList.spec.tsx.snap b/src/react/__snapshots__/WVList.spec.tsx.snap index 7194da6b4..e28857b30 100644 --- a/src/react/__snapshots__/WVList.spec.tsx.snap +++ b/src/react/__snapshots__/WVList.spec.tsx.snap @@ -6,10 +6,10 @@ exports[`horizontal should render 1 children 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    0 @@ -26,38 +26,38 @@ exports[`horizontal should render 5 children 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    0
    1
    2
    3
    4 @@ -74,43 +74,113 @@ exports[`horizontal should render 100 children 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    +
    +
    + 6 +
    +
    +
    +
    + 7 +
    +
    +
    +
    + 8 +
    +
    +
    +
    + 9 +
    +
    +
    +
    + 10 +
    +
    +
    +
    + 11 +
    +
    +
    +
    + 12 +
    +
    +
    +
    + 13 +
    +
    +
    +
    + 14 +
    +
    @@ -122,43 +192,113 @@ exports[`horizontal should render 1000 children 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    +
    +
    + 6 +
    +
    +
    +
    + 7 +
    +
    +
    +
    + 8 +
    +
    +
    +
    + 9 +
    +
    +
    +
    + 10 +
    +
    +
    +
    + 11 +
    +
    +
    +
    + 12 +
    +
    +
    +
    + 13 +
    +
    +
    +
    + 14 +
    +
    @@ -170,43 +310,113 @@ exports[`horizontal should render 10000 children 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    0
    1
    2
    3
    4
    +
    +
    + 5 +
    +
    +
    +
    + 6 +
    +
    +
    +
    + 7 +
    +
    +
    +
    + 8 +
    +
    +
    +
    + 9 +
    +
    +
    +
    + 10 +
    +
    +
    +
    + 11 +
    +
    +
    +
    + 12 +
    +
    +
    +
    + 13 +
    +
    +
    +
    + 14 +
    +
    @@ -218,24 +428,24 @@ exports[`horizontal should render component 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    component
    component
    component @@ -252,10 +462,10 @@ exports[`horizontal should render fragments 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    fragment @@ -268,7 +478,7 @@ exports[`horizontal should render fragments 1`] = `
    fragment @@ -285,15 +495,15 @@ exports[`horizontal should render non elements 1`] = ` style="display: inline-block; width: auto; height: 100%;" >
    string
    123
    @@ -308,38 +518,38 @@ exports[`horizontal should render with given width / height 1`] = ` style="display: inline-block; width: 100px; height: 800px;" >
    0
    1
    2
    3
    4 @@ -356,38 +566,38 @@ exports[`should change components 1`] = ` style="display: block; width: 100%; height: auto;" >
    • 0
    • 1
    • 2
    • 3
    • 4 @@ -409,10 +619,10 @@ exports[`should pass attributes to element 1`] = ` tabindex="0" >
      0 @@ -429,10 +639,10 @@ exports[`vertical should render 1 children 1`] = ` style="display: block; width: 100%; height: auto;" >
      0 @@ -449,38 +659,38 @@ exports[`vertical should render 5 children 1`] = ` style="display: block; width: 100%; height: auto;" >
      0
      1
      2
      3
      4 @@ -497,43 +707,148 @@ exports[`vertical should render 100 children 1`] = ` style="display: block; width: 100%; height: auto;" >
      0
      1
      2
      3
      4
      +
      +
      + 5 +
      +
      +
      +
      + 6 +
      +
      +
      +
      + 7 +
      +
      +
      +
      + 8 +
      +
      +
      +
      + 9 +
      +
      +
      +
      + 10 +
      +
      +
      +
      + 11 +
      +
      +
      +
      + 12 +
      +
      +
      +
      + 13 +
      +
      +
      +
      + 14 +
      +
      +
      +
      + 15 +
      +
      +
      +
      + 16 +
      +
      +
      +
      + 17 +
      +
      +
      +
      + 18 +
      +
      +
      +
      + 19 +
      +
      @@ -545,43 +860,148 @@ exports[`vertical should render 1000 children 1`] = ` style="display: block; width: 100%; height: auto;" >
      0
      1
      2
      3
      4
      +
      +
      + 5 +
      +
      +
      +
      + 6 +
      +
      +
      +
      + 7 +
      +
      +
      +
      + 8 +
      +
      +
      +
      + 9 +
      +
      +
      +
      + 10 +
      +
      +
      +
      + 11 +
      +
      +
      +
      + 12 +
      +
      +
      +
      + 13 +
      +
      +
      +
      + 14 +
      +
      +
      +
      + 15 +
      +
      +
      +
      + 16 +
      +
      +
      +
      + 17 +
      +
      +
      +
      + 18 +
      +
      +
      +
      + 19 +
      +
      @@ -593,43 +1013,148 @@ exports[`vertical should render 10000 children 1`] = ` style="display: block; width: 100%; height: auto;" >
      0
      1
      2
      3
      4
      +
      +
      + 5 +
      +
      +
      +
      + 6 +
      +
      +
      +
      + 7 +
      +
      +
      +
      + 8 +
      +
      +
      +
      + 9 +
      +
      +
      +
      + 10 +
      +
      +
      +
      + 11 +
      +
      +
      +
      + 12 +
      +
      +
      +
      + 13 +
      +
      +
      +
      + 14 +
      +
      +
      +
      + 15 +
      +
      +
      +
      + 16 +
      +
      +
      +
      + 17 +
      +
      +
      +
      + 18 +
      +
      +
      +
      + 19 +
      +
      @@ -641,24 +1166,24 @@ exports[`vertical should render component 1`] = ` style="display: block; width: 100%; height: auto;" >
      component
      component
      component @@ -675,10 +1200,10 @@ exports[`vertical should render fragments 1`] = ` style="display: block; width: 100%; height: auto;" >
      fragment @@ -691,7 +1216,7 @@ exports[`vertical should render fragments 1`] = `
      fragment @@ -708,15 +1233,15 @@ exports[`vertical should render non elements 1`] = ` style="display: block; width: 100%; height: auto;" >
      string
      123
      @@ -731,38 +1256,38 @@ exports[`vertical should render with given width / height 1`] = ` style="display: block; width: 100px; height: 800px;" >
      0
      1
      2
      3
      4 diff --git a/stories/basics/WVList.stories.tsx b/stories/basics/WVList.stories.tsx index fe08a0738..278d7f140 100644 --- a/stories/basics/WVList.stories.tsx +++ b/stories/basics/WVList.stories.tsx @@ -199,19 +199,22 @@ const RestorableList = ({ id }: { id: string }) => { window.scrollTo(0, offset ?? 0); + let scrollY = 0; + const onScroll = () => { + scrollY = window.scrollY; + }; + window.addEventListener("scroll", onScroll); + onScroll(); + return () => { - sessionStorage.setItem( - cacheKey, - JSON.stringify([window.scrollY, handle.cache]) - ); + window.removeEventListener("scroll", onScroll); + // Use stored window.scrollY because it may return 0 in useEffect cleanup + sessionStorage.setItem(cacheKey, JSON.stringify([scrollY, handle.cache])); }; }, []); return ( - + {createRows(1000)} ); @@ -223,8 +226,8 @@ export const ScrollRestoration: StoryObj = { const [selectedId, setSelectedId] = useState("1"); return ( -
      -
      +
      +