useSelect fetch on scroll

it's me again!) How to use scroll pagination with select via useSelect hook? Maybe you have any example?

29 Replies

optimistic-gold•2y ago

Hi, great to see you again ninja

you can follow this example https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/#infinite-loading-example

xenial-black•2y ago

i saw it, but in your example it doesn't work( https://owaiyvrkbgithub-hbbq--3000.local.webcontainer.io/posts/create it fetches data ones and thats it, but what about scrolling?)

optimistic-gold•2y ago

oh sorry, i will debug and inform you

xenial-black•2y ago

so i use this getList method in data provider

xenial-black•2y ago

and as i understand from docs, useSelect use em as default method

optimistic-gold•2y ago

yes, you are right i check infinite loading example, in post list page, on table's category filter works as expected. am i missing something ? code example is here: pages/posts/list.tsx

xenial-black•2y ago

this one)

optimistic-gold•2y ago

infinite scroll example only implemented on here. category section filter

xenial-black•2y ago

wow i try to find it in create)) or edit)

optimistic-gold•2y ago

i guess we need to write this to doc, we have 4 page and only table filter has implemented code. sorry about that.

xenial-black•2y ago

yep, that would be nice for the next similar questions) from Refine users)

optimistic-gold•2y ago

this is the fetch on scroll related code. src/pages/posts/list.tsx

    ---

    const [options, setOptions] = useState<SelectProps["options"]>([]);
    const [search, setSearch] = useState<string>("");

    const hasMore = useRef(true);

   ---

  const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
        fetchSize: 20,
        pagination: { current: page },

        queryOptions: {
            keepPreviousData: true,
            onSuccess(data) {
                if (!data.data?.length) {
                    hasMore.current = false;
                }

                const normalizedData = data.data?.map((item) => ({
                    label: item.title,
                    value: item.id,
                }));

                if (!search?.length) {
                    setOptions((prev) => [...(prev || []), ...normalizedData]);
                } else {
                    setOptions(normalizedData);
                }
            },
        },

        onSearch: (value) => {
            setPage(1);
            hasMore.current = true;
            setSearch(value);

            return [
                {
                    field: "title",
                    operator: "contains",
                    value,
                },
            ];
        },
    });

---

     filterDropdown={(props) => (
                        <FilterDropdown {...props}>
                            <Select
                                mode="multiple"
                                style={{ minWidth: 200 }}
                                {...categorySelectProps}
                                // need to add options with searchValue and onPopupScroll
                                options={options}
                                onPopupScroll={(event) => {
                                    const target = event.currentTarget;
                                    if (
                                        target.scrollTop +
                                            target.offsetHeight ===
                                        target.scrollHeight
                                    ) {
                                        if (
                                            categorySelectProps.options &&
                                            hasMore.current
                                        ) {
                                            setPage((curr) => curr + 1);
                                        }
                                    }
                                }}
                            />
                        </FilterDropdown>
                    )}

    ---

    const [options, setOptions] = useState<SelectProps["options"]>([]);
    const [search, setSearch] = useState<string>("");

    const hasMore = useRef(true);

   ---

  const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
        fetchSize: 20,
        pagination: { current: page },

        queryOptions: {
            keepPreviousData: true,
            onSuccess(data) {
                if (!data.data?.length) {
                    hasMore.current = false;
                }

                const normalizedData = data.data?.map((item) => ({
                    label: item.title,
                    value: item.id,
                }));

                if (!search?.length) {
                    setOptions((prev) => [...(prev || []), ...normalizedData]);
                } else {
                    setOptions(normalizedData);
                }
            },
        },

        onSearch: (value) => {
            setPage(1);
            hasMore.current = true;
            setSearch(value);

            return [
                {
                    field: "title",
                    operator: "contains",
                    value,
                },
            ];
        },
    });

---

     filterDropdown={(props) => (
                        <FilterDropdown {...props}>
                            <Select
                                mode="multiple"
                                style={{ minWidth: 200 }}
                                {...categorySelectProps}
                                // need to add options with searchValue and onPopupScroll
                                options={options}
                                onPopupScroll={(event) => {
                                    const target = event.currentTarget;
                                    if (
                                        target.scrollTop +
                                            target.offsetHeight ===
                                        target.scrollHeight
                                    ) {
                                        if (
                                            categorySelectProps.options &&
                                            hasMore.current
                                        ) {
                                            setPage((curr) => curr + 1);
                                        }
                                    }
                                }}
                            />
                        </FilterDropdown>
                    )}

yes you are absolutely right, thanks for the feedback ! we will handle it as soon as possible

xenial-black•2y ago

yep, found this)

optimistic-gold•2y ago

actually we have useSelectInfiniteScroll() feature in our backlog. when we ship this feature, it will be much easier to use. just like a useSelect !

xenial-black•2y ago

i'll try to implement this

optimistic-gold•2y ago

please let me know if anythings go wrong

xenial-black•2y ago

sounds perfect! thanks brou, you all do great job 😄 glad to use your framework)

optimistic-gold•2y ago

thanks 🙏 we are happy to hear that

xenial-black•2y ago

another case) try to find only one option, and after that -> delete this option from selected and you see that initial state will not setted back @alicanerdurmaz

optimistic-gold•2y ago

sorry @amounguluz i couldn't understand. can you give me more explanation please ?

xenial-black•2y ago

i'll record you video)

optimistic-gold•2y ago

thank you

xenial-black•2y ago

maybe you have any idea how to refetch data?) @alicanerdurmaz

optimistic-gold•2y ago

i will check as soon as possible

xenial-black•2y ago

thanks)

optimistic-gold•2y ago

oh. you want to searchText should stay. did i understand correctly ?

like-gold•2y ago

I think you can do that by passing a custom filter action in filterOption prop of Select 🤔 I thought antd is going to have a custom prop for it but no, they left this to the user 😅