Refine•3y ago

useSelect fetch on scroll

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

brilliant-lime•12/23/22, 12:48 PM

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

rubber-blueOP•12/23/22, 12:59 PM

i saw it, but in your example it doesn't work(
https://owaiyvrkbgithub-hbbq--3000.local.webcontainer.io/posts/create

rubber-blueOP•12/23/22, 1:00 PM

it fetches data ones and thats it, but what about scrolling?)

brilliant-lime•12/23/22, 1:01 PM

oh sorry, i will debug and inform you

rubber-blueOP•12/23/22, 1:02 PM

so i use this getList method in data provider

rubber-blueOP•12/23/22, 1:02 PM

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

brilliant-lime•12/23/22, 1:04 PM

yes, you are right

brilliant-lime•12/23/22, 1:06 PM

i check infinite loading example, in post list page, on table's category filter works as expected.

am i missing something ?

brilliant-lime•12/23/22, 1:06 PM

code example is here: pages/posts/list.tsx

rubber-blueOP•12/23/22, 1:07 PM

rubber-blueOP•12/23/22, 1:07 PM

this one)

brilliant-lime•12/23/22, 1:08 PM

infinite scroll example only implemented on here. category section filter

rubber-blueOP•12/23/22, 1:09 PM

wow

rubber-blueOP•12/23/22, 1:09 PM

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

brilliant-lime•12/23/22, 1:09 PM

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

sorry about that.

rubber-blueOP•12/23/22, 1:11 PM

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

rubber-blueOP•12/23/22, 1:11 PM

from Refine users)

brilliant-lime•12/23/22, 1:11 PM

this is the fetch on scroll related code.

src/pages/posts/list.tsx

brilliant-lime•12/23/22, 1:12 PM

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

rubber-blueOP•12/23/22, 1:13 PM

yep, found this)

brilliant-lime•12/23/22, 1:14 PM

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

rubber-blueOP•12/23/22, 1:14 PM

i'll try to implement this

brilliant-lime•12/23/22, 1:14 PM

please let me know if anythings go wrong

Bbrilliant-lime actually we have `useSelectInfiniteScroll()` feature in our backlog. when we sh...

rubber-blueOP•12/23/22, 1:14 PM

sounds perfect!

Bbrilliant-lime please let me know if anythings go wrong

rubber-blueOP•12/23/22, 1:15 PM

thanks brou, you all do great job

glad to use your framework)

brilliant-lime•12/23/22, 1:16 PM

thanks

we are happy to hear that

rubber-blueOP•12/23/22, 2:21 PM

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

rubber-blueOP•12/23/22, 2:23 PM

@alicanerdurmaz

brilliant-lime•12/23/22, 2:31 PM

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

rubber-blueOP•12/23/22, 2:31 PM

i'll record you video)

brilliant-lime•12/23/22, 2:32 PM

thank you

rubber-blueOP•12/23/22, 2:43 PM

maybe you have any idea how to refetch data?)

rubber-blueOP•12/23/22, 2:52 PM

@alicanerdurmaz

brilliant-lime•12/23/22, 2:52 PM

i will check as soon as possible

rubber-blueOP•12/23/22, 2:52 PM

thanks)

brilliant-lime•12/23/22, 2:57 PM

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

efficient-indigo•12/23/22, 3:01 PM

I think you can do that by passing a custom filter action in prop of

Select

Select

efficient-indigo•12/23/22, 3:02 PM

I thought

antd

antd

is going to have a custom prop for it but no, they left this to the user

--- 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> )}