Issue when using more than one InfiniteGrid per page

[astralmedia]

Description

Currently if I have more than one infinitegrid component in my DOM the 2nd one starts to glitch out a bit. It shows double the items, with the first set disappearing and reappearing as I scroll up and down.

Is there something I am missing from the docs that enables multiple of them to live side by side?

Steps to check or reproduce

[daybrush]

@astralmedia

Could you provide a demo link or a gif?

I think it's probably something to do with the container option. Are you using window scrolling? Or are you using element scroll?

[astralmedia]

not sure, how can I tell? I basically have this

<MasonryInfiniteGrid column={columnCount} gap={5} ref={gridRef} onRequestAppend={getNextRequest} useResizeObserver={true}>

[astralmedia]

Also is there any way to disable to auto scrolling when content loads?

[daybrush]

1. Let me know if you used the container option. Or maybe it's the use of a duplicate key. It would be nice to have a demo/screenshot.

2. disable scrollRestoration https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

[astralmedia]

Can't seem to figure out how to disable scrollRestoration in react...any chance you know a path?

Also, not sure what the container option is?

Thanks for your help, sorry, I manage a whole platform of codebases so my head is all over the place right now.

[astralmedia]

Is there a way to stop the groups from disappearing as u scroll? Currently I am finding my content disappearing before its off screen.

[astralmedia]

fyi this is what im working with

<MasonryInfiniteGrid
        column={columnCount}
        gap={5}
        ref={gridRef}
        onRequestAppend={getNextRequest}
        useResizeObserver={true}
    >
        {items && _.get(items, "length", 0) > 0 && items.map((item, index) => {
            if(index+1 <= _.get(props, "limit", 9999)){
                const listTemplate = getTemplate(item, index)
                return listTemplate
            }
            
        })}
    </MasonryInfiniteGrid>

[daybrush]

@astralmedia

Perhaps the distance between the container and the body is wrong.

First call the renderItems({ useResize: true }) method or

try setting the option to useRecycle: false

or Update react-infinitegrid version

[astralmedia]

hrmm, didnt want to respond till i experimented a bit with this...but unfortunately trying all different combinations of the things you suggested I cannot get the auto scrolling on load to go away...I am starting to think its not the scroll restoration potentially as it happens on the first load of a completely new session in private mode. You would know better than me with an understanding of the inner workings.

I have "@egjs/react-infinitegrid": "^4.6.0", currently...it seems like the latest.

Thanks for trying to help me figure this out. Sorry to take so much back and forth.