Closed
Description
I want to have an infinite scroll functionality with the combobox, and when reaching the bottom, I want to add new data. However, this doesn't work because the scroll jumps to the top.
What package within Headless UI are you using?
@headlessui/vue
What version of that package are you using?
1.7.16
What browser are you using?
Chrome
Reproduction URL
The issue can be reproduced by loading the initial data from an endpoint and adding new data while scrolling. It jumps to the top, which doesn't make sense; it should keep the scroll in its current position and add the new elements. If I change the ComboboxOption to a div, the behavior is correct (But I lose other functionalities of the Combobox).
Describe your issue
My code is the following.
<Scroll v-else class="w-full h-40" @next="onNextPage">
<ComboboxOption
v-for="item in projectList."
:key="item.id"
v-slot="{ selected }"
:value="item"
as="template"
>
<li
:class="[
selected ? 'bg-aux-100 text-aux-300' : 'text-gray-900',
'relative cursor-default select-none rounded-full py-2 px-4',
]"
>
<span
:class="[
selected ? 'font-medium' : 'font-normal',
'block truncate text-sm',
]"
>
{{ item.name }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 right-4 flex items-center pl-3 text-aux-300"
>
<Icon
name="icon-check"
class="h-5 w-5"
aria-hidden="true"
/>
</span>
</li>
</ComboboxOption>
</Scroll>
const onNextPage = () => {
console.log('bottom scroll')
const { currentPage, lastPage } = projectRequestMeta.value
if (currentPage < lastPage) {
getProjectList({ page: currentPage + 1 })
}
}
const getProjectList = async ({ page = 1 }) => {
try {
const { data, meta } = await Project.paginate({
query: { page, search: query.value, limit: 30 },
})
if (page === 1) {
projectList.value = []
}
// HERE THE SCROLL RETURN TO TOP
projectList.value = [...projectList.value, ...data]
// I TRYED WITH projectList.value.push(...data)
projectRequestMeta.value = meta
} catch (error) {
handleError(error)
}
}
Metadata
Metadata
Assignees
Labels
No labels