Reactivesearch: Infinite Scroll doesn't work if the page is not scrollable

[a-magdy]

Hi guys,

As always thanks for your great work in this library :)

Issue Type: Bug -an edge case with a workaround-

Platform: Web

Description: Infinite scroll doesn't work if the browser page is not scrollable

Screenshots:

• 10 items per page on a big screen:
  

• or only 1 item per page (as an extreme case):
  

Minimal reproduction of the problem with instructions:

• From the booksearch demo, update the pagination to false, and update the page size to 10 or less until the scrollbar disappears
• Try to scroll down to fetch more, but it won't be possible, until you resize the screen, so that the scrollbar appears, so that the infinite loader works

Reactivesearch version: 2.6.2

Browser: Chrome 66

I am not sure whether this is a real issue, but I thought to start a discussion about it, maybe we could come up with a solution for it in the future, like adding a load more button as proposed in this issue: https://github.com/appbaseio/reactivesearch/issues/126 in case the page is not scrollable, and we are not on the last page yet

Thanks :)

[metagrover]

Makes sense 👍

Load More button should be able to tackle this issue properly.

[dedaimia]

I have a related problem with infinite scroll. We are putting the search results inside another scrollable component, and infinite scroll does not work there, since it is only triggered by the window scroll event. Could there be an option to trigger infinite scroll on the containing component's scroll, not just window scroll?

[metagrover]

We used to have a prop called scrollTarget which accepted the target container for watching infinite loading on scroll, but we got rid of it in the new architecture.

It's a trivial implementation if you want to take this up. Open to PRs.

[dedaimia]

Thanks, metagrover. Yes, I'll take a look at it and put in a PR. May take me a few weeks to get to it.

[nicholasfay]

@dedaimia Any update or workaround to this? Currently have a ResultsList inside a component that has its own scroll and would like to use infinite scrolling.

[dedaimia]

Hey Nicolas,
Our end users decided they didn’t care that much about infinite scroll, so we’re just using regular paging on the result list for now. It’s still on our list for eventual fix, but priority is low enough I doubt I’ll get back to it soon.
Thanks,
Dedaimia

From: Nicholas Fay [e-mail]
Reply-To: appbaseio/reactivesearch [e-mail]
Date: Wednesday, September 19, 2018 at 3:22 PM
To: appbaseio/reactivesearch [e-mail]
Cc: "Kozlovsky, Dedaimia" [e-mail], Mention [e-mail]
Subject: [EXTERNAL] Re: [appbaseio/reactivesearch] Infinite Scroll doesn't work if the page is not scrollable (#369)

@dedaimiahttps://github.com/dedaimia Any update or workaround to this? Currently have a ResultsList inside a component that has its own scroll and would like to use infinite scrolling.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/appbaseio/reactivesearch/issues/369#issuecomment-422944972, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AQwjR7DpZbizb7DednssomrgeXMSMa_wks5ucqdugaJpZM4UDOuG.

[metagrover]

Hi guys, thanks for bringing this up. We will include this in the next release.

TODO: Add support for `scrollTarget` prop in result components.

cc: @jyash97

[metagrover]

Released in v2.10.0 🎉