-
Notifications
You must be signed in to change notification settings - Fork 43
List with dynamically sized elements jumps when refreshed #73
Description
I'm implementing a multi-select JS component, and I'm using hyperlist to render the options inside a dropdown.
One feature is to display a description below the option. This requires the options to have a dynamic size, as some options may have a description while others don't.
When an option is clicked, the hyperlist is refreshed to reflect the change. If no options in the list have a description, the list retains its scroll position. However, if there are options which are taller than the set itemHeight, the list jumps to another position.
I have made a codepen to demonstrate the issue. Scroll down a bit, then hit refresh. The list should jump to another position. Note that it does not always jump.
https://codepen.io/Gradox/pen/jENPpbM
I have also noticed that when dragging the scrollbar down, it does not hit the bottom. This is probably due to how the height is calculated?
Here is a demonstration of how the list behaves in my component.
https://github.com/user-attachments/assets/bec028ff-de30-47f8-9acf-8f840ac8faa2