scrollableTarget not trigger about react-infinite-scroll-component

[ankeetmaini]

Please find a working sample here https://codesandbox.io/s/r7rp40n0zm

Instead of passing the node reference like document.getElementById("some-div") just pass the id of the DOM element.

[ankeetmaini]

No no, so giving an `id` to Grid.Column will not work, `id` should be on a DOM node. Grid.Column won't set `id` to any element. So when InfiniteScroll component does document.getElementById('billList') it'll not get anything. Can't you pass a height, or let the scroll happen at the window?

…

On Thu, 17 May 2018 at 18:01 Guido ***@***.***> wrote: Yes <Grid.Column width={11} id='billList' className='bill-content fdx-content bill-list-container'> <InfiniteScroll dataLength={this.props.bills. length} //This is important field to render the next data next={this.loadBills} scrollableTarget="billList" hasMore={this.state.hasMore} loader={<Loader status={this.props.isFetching} />}> <BillList localId={local.id} token={token} getBills={getBills} openSidebar={this.openSidebar} isSidebarOpen={isSidebarOpen} bills={this.props.bills} /> </InfiniteScroll> </Grid.Column> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#59 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWDl6hOFrJ9yZEb_bXGKQqMtQu0RTipks5tzW2NgaJpZM4T6QeI> .

[ikorgik]

Have same problems

[ankeetmaini]

I see, I debugged this and seems like by the time your component's render gets called, the element doesn't exist in the DOM. It then passes null, as scrollableTarget, because document.getElementId('some-div') doesn't return anything.

To fix this I'll add another check to see if scrollableTarget's type is string, I'll do a lookup from the DOM inside InfiniteScroll's componentDidMount.

[gdpsysgarage]

@ankeetmaini I have updated the package but when i put the scrollableTarget as a string it breaks all the webapp

<InfiniteScroll
                dataLength={this.props.bills.length}
                next={this.loadBills}
                hasMore={this.state.hasMore}
                scrollableTarget="billList"
                loader={<Loader status={this.props.isFetching} />} >
                  <BillList
                    localId={local.id}
                    token={token}
                    getBills={getBills}
                    openSidebar={this.openSidebar}
                    isSidebarOpen={isSidebarOpen}
                    bills={this.props.bills}
                  />
                </InfiniteScroll>

[ankeetmaini]

Is billList defined as an id?

…

On Thu, May 17, 2018, 12:47 AM Guido ***@***.***> wrote: @ankeetmaini <https://github.com/ankeetmaini> I have updated the package but when i put the scrollableTarget as a string it breaks all the webapp <InfiniteScroll dataLength={this.props.bills.length} next={this.loadBills} hasMore={this.state.hasMore} scrollableTarget="billList" loader={<Loader status={this.props.isFetching} />} > <BillList localId={local.id} token={token} getBills={getBills} openSidebar={this.openSidebar} isSidebarOpen={isSidebarOpen} bills={this.props.bills} /> </InfiniteScroll> [image: error] <https://user-images.githubusercontent.com/37113788/40138904-86d69780-5924-11e8-9e21-56db79f953ba.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#59 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWDl68DQlnJoEZDAm2nSxK17cD4W-4vks5tzHtKgaJpZM4T6QeI> .

[gdpsysgarage]

Yes

<Grid.Column width={11} id='billList' className='bill-content fdx-content bill-list-container'>
              <InfiniteScroll
                dataLength={this.props.bills.length} //This is important field to render the next data
                next={this.loadBills}
                scrollableTarget="billList"
                hasMore={this.state.hasMore}
                loader={<Loader status={this.props.isFetching} />}>
                  <BillList
                    localId={local.id}
                    token={token}
                    getBills={getBills}
                    openSidebar={this.openSidebar}
                    isSidebarOpen={isSidebarOpen}
                    bills={this.props.bills}
                  />
                </InfiniteScroll>
            </Grid.Column>

[gdpsysgarage]

Yes you are right. If I put the ID in a Grid element it doesnt works. But if I change it to a div it works. Thanks for your work 🥇

[Linch1]

Hello thanks for this plugin, i have a question.

what if the infinite-scroll-component is rendered inside a shadow dom and also the scollableTarget is in the shadow dom?

If the id of the scollableTarget is passed then the id is relative to the shadow dom and not the main document, so calling document.getElementById("Myid") will result in null, instead if done inside the shadow dom the element is found.

there is a way to pass a ref to the component instead than the id, on an html element ?

[iwgyyyy]

Hello thanks for this plugin, i have a question.

what if the infinite-scroll-component is rendered inside a shadow dom and also the scollableTarget is in the shadow dom?

If the id of the scollableTarget is passed then the id is relative to the shadow dom and not the main document, so calling document.getElementById("Myid") will result in null, instead if done inside the shadow dom the element is found.

there is a way to pass a ref to the component instead than the id, on an html element ?

In fact, you can copy the component into your code and then replace document.getElementById with your own code.