Skip to content

InfiniteScroll is not infinite in some cases #7828

@danielm-hpe

Description

@danielm-hpe

Is this something you or your team is interested in contributing a pull request towards?

No

Expected Behavior

The default behavior for the DataTable and List components is to internally use the InfiniteScroll component. This appears to default to 50 items at a time. It's expected that if pagination behavior is not specified, these components should be able to render all of the data utilizing infinite scroll.

Actual Behavior

In some cases I have observed that InfiniteScroll does not load additional "steps" beyond the initial page. It's unclear what are all of the conditions that this can happen. One scenario that I have a reproducible steps for is inside an accordion, in a layer.

I was not able to reproduce the issue outside of a layer in my sandbox, but I did see this issue also on COM's main data tables that are backed by paginated API responses and have a page size of 100. Only 50 items were being loaded, but specifying a the step prop to equal the pageSize of 100 disabled the infinite scroll behavior.
https://github.com/compute-cloud/indigo/pull/4648
I am apparently no longer able to reproduce this issue by removing the step prop.

URL, Screenshot, or CodeSandbox

https://github.com/danielm-hpe/grommet-infinite-scroll-repro

Steps to Reproduce

  1. put a data table or list with > 50 items in them inside an accordion in a layer

Your Environment

grommet 2.50.0
chrome
win 11

Metadata

Metadata

Assignees

No one assigned

    Labels

    researchNeeds more research to decide on a direction

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions