New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useInfiniteScroll - broken on v10.2.1 #3201
Comments
I can confirm, its broken in latest version |
I'm very sorry, but #3212 didn't seem to fix the issue. :/
As you see, I'm using Edit: I'm not seeing any error, |
if you use the following code, you'll actually find that the console doesn't print out any log. However, you can see that the request has been made if you look at the network tab.
|
@erikkkwu It simply doesn't call anything. I tried Firefox and Brave, they don't call 'fetch' (or anything else) when reaching the button of the page. It does work fine on |
So I did some more testing, and I believe it's completely broken now:
This happens when I just scroll to the end of the page, it keeps calling this over-and-over.. and never stops. Weird thing, is when I call a method ( |
I've found that this is the original behavior. Because when onLoadMore is called, if your callback data can't stretch the scroll height, it will execute again, leading to an infinite loop. this behavior is consistent in both versions 10.2.0 and 10.3.0 when using the same test case.
As mentioned above, if there's no height initially, it will immediately trigger onLoadMore. However, if you can stretch the scroll height afterward, it will stop. infinite loop caused by the inability to extend the height could be another point that needs to fix. It's also possible that there are cases I haven't considered. If it's convenient for you, could you provide a more detailed case for me to test? thanks. |
@erikkkwu After more debugging, I think the problem is this line: const set = (obj: Response) => {
state.data = state.data.concat(obj.data) // <-- this one, array of objects
state.links = obj.links
} If I use
This does work: state.data.push(<BookModel>{id: 'test', name: 'test' }) I don't know why this has been changed? I think I need to use |
So I've moved to It's a bit ugly, but it also brings some new features: const { arrivedState } = useScroll(document, {
throttle: 100,
behavior: 'smooth'
})
onMounted(() => initialize())
watch(arrivedState, (state) => (state.bottom ? fetch() : null)) |
hi @francoism90 you're saying that useInfiniteScroll is executed, but the state inside can no longer be updated using push after version 10.2.0? Which state management are you using ? |
@erikkkwu I'm using Vue3 composables, like this: const state = reactive(<BookState>{
data: new Array(),
})
export function useBooks() {
// initialize
// fetch
// reset
// ..
} It works fine when using It's really weird, it does call |
hi @francoism90 I've tried to reproduce your issue, but I couldn't. However, your suggestion to only trigger the fetch when reaching the bottom instead of at the start seems like a new requirement that could be explored. |
@erikkkwu I think there is still an issue when working with Here, we state that In my testing I noticed that vueuse/packages/core/useInfiniteScroll/index.ts Lines 60 to 72 in 028a732
Can we bypass the whole visibility check for |
hi @genu my logic here involves converting the Window or Document into a root element so that it can be used by the IntersectionObserver. I've previously created a bypass version, but it ended up being relatively verbose and harder to read. because the element is a MaybeRefOrGetter, I need to monitor changes to the element to determine whether it should use the IntersectionObserver. But I can't reproduce a situation where isElementVisible for Window or Document is always false. Could you please create a reproduction so I can understand the case under which it is always false? thanks |
@erikkkwu Isn't this possible when using async components? I will try to release some code today. |
@erikkkwu I've had a hard time creating a minimal reproduction, as I can only see the problem in a private project. After some further debugging, I'm starting to think that in fact, there isn't a bug in the For example, in my case, the rendered height of the Notice in the screenshot below: Upon scrolling down, the @francoism90 Maybe check the styles of the elements involved. |
yup it's broken |
@genu It's not the style, I tried multiple things, like applying overflow, removing overflow, change heights, use it on different elements.. but it's the |
I've tried the latest version with |
+1 |
1 similar comment
+1 |
hello, @shynline @grindpride could you provide a minimal reproduction for me? thanks |
@erikkkwu I checked my case - it no longer reproduces on the current version 🥳 |
@erikkkwu I tested the latest version and it's working. |
Can confirm. Updating to the latest version seems to have fixed the issue. |
10.7.1 does not fix the original issue for me. Still works on 10.2.0. I have an open-source project with the issue, but it requires PHP to run. Fixing my CSS did work though, as pointed out by @genu it was a height issue on the |
Describe the bug
I use this to scroll on the body:
However upgrading to
v10.2.1
, it doesn't seem to work anymore. Downgrading tov10.2.0
fixes the issue.I think this is the cause: #3143
Reproduction
https://stackblitz.com/edit/vitejs-vite-zf9drc
System Info
Used Package Manager
npm
Validations
The text was updated successfully, but these errors were encountered: