Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Layout breaks when changing lanes option with measureElement used

Ouverte
#1,036 0 commentaires 7 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
typescript
Domaine
frontend

Piste de recherche

Commencez par la reproduction CodeSandbox liée et suivez le chemin de useVirtualizer impliquant measureElement, des lanes dynamiques et des mesures d’éléments mises en cache. Reproduisez l’échec en faisant défiler jusqu’à la fin, en changeant les lanes de 10 à 5, et confirmez que la mise en page recalcule les positions sans éléments mal positionnés ni espaces vides.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Describe the bug

When using measureElement with useVirtualizer, changing the number of lanes dynamically causes the layout to break.
The virtualizer calculates incorrect ranges for items with indices beyond the visible range, resulting in mispositioned items or empty spaces.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/tankstack-virtual-range-extractor-forked-wlddzn?workspaceId=ws_NvUKNhUDiFBCs4Fb9Zkkhb

Steps to reproduce
  1. Scroll to the end of the list (so that only higher-index items are rendered).
  2. Change the number of lanes from 10 to 5 dynamically.
Expected behavior
  • The virtualizer should correctly invalidate cached measurements for all items and recalculate their positions when the number of lanes changes.
  • The layout should adjust seamlessly after changing lanes.
How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Any platform

tanstack-virtual version

3.13.12

TypeScript version

5.2.2

Additional context

No response

Terms & Code of Conduct
  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Langage dominant
TypeScript
Étoiles
7.1k
Forks
472
Merge moyen
1 j 2 h
PR mergées (30 j)
12

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/virtual

Toutes les issues de TanStack/virtual

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.