PolymerLabs / uni-virtualizer

Monorepo for a "universal" (renderer-agnostic) virtual scroller and renderer-specific variants

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`_getAnchor: negative _first` when calling scrollToIndex

jpzwarte opened this issue · comments

I'm working on a combo-box component. The overlay contains a <lit-virtualizer> element with the list. When I open the overlay and there is a selected item, I scroll the virtualizer to that item (centered) using virtualizer.scrollToIndex(selectedIndex, 'center');

Now if I do this, before the overlay is visible, I get the _getAnchor: negative _first message in the console and it scrolls to the incorrect location. When I do this after the overlay is visible, it scrolls to the correct item in the list, but it "jumps": the original position of the list is briefly visible. See the video below.

Screen.Recording.2022-05-20.at.16.54.02.mov

Thanks for the bug report, @jpzwarte. I don't suppose you have a repro case we can run? A minimal repro in the Lit Playground would be ideal, but anything is better than nothing.

We've recently been working on a pretty thorough overhaul of virtualizer's "scroll-to" functionality, including a way to declaratively specify the scroll position on the initial render. I think this should meet your needs, but I'd like to make sure these issues in the imperative case are handled as well.

Sounds good! I need to debug the situation a bit more. Seeing some other weird stuff that I'm not sure is not related to the way I provide the items to the virtualizer. (I'm using the VirtualArray technique from the examples to do something similar).

@graynorton affaict, what happens is that when calling scrollToIndex() before the overlay is shown:
Screenshot 2022-05-23 at 10 26 43

The first _first is 0 is from before I triggered opening the overlay.

  • _first is XX is a logpoint in flow.ts on line 373
  • scrollToIndex is XX is a logpoint in flow.ts on line 312
  • _scrollPositionChanged is a logpoint in BaseLayout.ts on line 508
  • the error message is flow.ts line 236

@jpzwarte did you find a solution for this issue?