src/shared/ui/VirtualList/VirtualList.svelte

@@ -10,10 +10,7 @@
 <script lang="ts" generics="T">
 import { createVirtualizer } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
+import type { Snippet } from 'svelte';
-    type Snippet,
-    tick,
-} from 'svelte';
 
 interface Props {
     /**
@@ -57,6 +54,7 @@ let { items, itemHeight = 80, overscan = 5, class: className, children }: Props
 
 const virtualizer = createVirtualizer(() => ({
     count: items.length,
+    data: items,
     estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight,
     overscan,
 }));
@@ -66,19 +64,22 @@ const virtualizer = createVirtualizer(() => ({
     use:virtualizer.container
     class={cn(
         'relative overflow-auto border rounded-md bg-background',
-        'outline-none focus-visible:ring-2 ring-ring ring-offset-2',
+        'h-150 w-full',
-        'h-full w-full',
         className,
     )}
-    role="listbox"
-    tabindex="0"
 >
+    <div
+        style:height="{virtualizer.totalSize}px"
+        class="w-full pointer-events-none"
+    >
+    </div>
+
     {#each virtualizer.items as item (item.key)}
         <div
             use:virtualizer.measureElement
             data-index={item.index}
-            class="absolute top-0 left-0 w-full translate-y-[var(--offset)] will-change-transform"
+            class="absolute top-0 left-0 w-full"
-            style:--offset="{item.start}px"
+            style:transform="translateY({item.start}px)"
         >
             {@render children({ item: items[item.index], index: item.index })}
         </div>