diff --git a/.trellis/tasks/04-03-list-table-v2-tanstack-pretext/VIRTUAL-SCROLLING-DEBUG.md b/.trellis/tasks/04-03-list-table-v2-tanstack-pretext/VIRTUAL-SCROLLING-DEBUG.md new file mode 100644 index 0000000..4950ded --- /dev/null +++ b/.trellis/tasks/04-03-list-table-v2-tanstack-pretext/VIRTUAL-SCROLLING-DEBUG.md @@ -0,0 +1,95 @@ +# Virtual Scrolling Debug Notes + +## Date: 2026-04-03 + +## Issue: Virtual Scrolling Not Updating on Scroll + +### Symptoms +- Rows weren't shifting when scrolling programmatically +- Debug info showed correct scrollTop but rows stayed the same +- Force re-render (classList toggle) fixed it momentarily + +### Root Causes Found + +#### 1. Vue Template Ref Auto-Unwrapping +**Problem**: `virtualizer.visibleRows` is a `ComputedRef` inside an object. Vue 3 auto-unwraps top-level refs in templates, but NOT refs nested inside objects. + +**Evidence**: +``` +TypeScript error: Property 'index' does not exist on type 'true | ComputedRefImpl | VirtualRow[]' +``` + +**Fix**: Destructure the needed values from `virtualizer`: +```typescript +const { visibleRows, totalHeight: virtualTotalHeight, onScroll } = virtualizer; +``` + +#### 2. Vue 3 Template `.value` Usage +**Problem**: In Vue 3 `