Skip to content
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

useWindow={true} not working #289

Open
Mihai-github opened this issue Feb 3, 2022 · 2 comments
Open

useWindow={true} not working #289

Mihai-github opened this issue Feb 3, 2022 · 2 comments

Comments

@Mihai-github
Copy link

Describe the bug
A clear and concise description of what the bug is.

Using useWindow={true} as the docs say "Add scroll listeners to the window, or else, the component's parentNode." should help me to achieve infinite scroll but it does nothing.

To Reproduce
Please clone your layout and use of react-infinite-scroller by forking this Code Sandbox and linking it here. Doing so will massively expedite getting the bug fixed! 👊

export const InfiniteScrollerComponent = memo(
    ({
        meta,
        loadMore,
        children,
    }: {
        meta: IPageMeta;
        loadMore: () => void;
        children: React.ReactNode;
    }) => {
        const scrollParentRef = useRef<any>();
        return (
            // <div
            //     style={{height: '75vh', overflow: 'auto'}}
            //     ref={(ref: any) => (scrollParentRef.current = ref)}>
            <InfiniteScroll
                pageStart={meta && meta.currentPage}
                // loadMore
                loadMore={() => alert(1)}
                hasMore={meta?.currentPage < meta?.totalPages}
                loader={
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                            width: '100%',
                            marginBottom: 25,
                        }}>
                        <Spinner size="xl" color="primary" />
                    </div>
                }
                style={{
                    width: '100%',
                    display: 'flex',
                    flexWrap: 'wrap',
                    flexDirection: 'column',
                }}
                threshold={1050}
                // element="body"
                // @ts-ignore
                // getScrollParent={() => {
                //     scrollParentRef;
                // }}
                useWindow={true}>
                {children}
            </InfiniteScroll>
            // </div>
        );
    },
);

Expected behavior
A clear and concise description of what you expected to happen.

Not having the ability to use the browser scroll event for infinite scrolling. Something is weird because the component knows there is more to fetch because hasMore={true} but the loadMore function does not trigger at all...

Screenshots
If applicable, add screenshots to help explain your problem.

image

Device (please complete the following information):

  • OS: [e.g. Mac]: macOs Big Sur 11.6
  • Browser [e.g. chrome, safari]: Chrome
  • Version [e.g. 22]: Chrome Version 97.0.4692.99 (Official Build) (x86_64)
  • "react-infinite-scroller": "^1.2.4",
  • "react": "17.0.2",
@Eigilak
Copy link

Eigilak commented Jan 9, 2023

Any update?

@KartikayDhingra
Copy link

I'm facing the same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants