Skip to content

List with dynamically sized elements jumps when refreshed #73

@CodeGradox

Description

@CodeGradox

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions