Skip to content

When adding async data to the combobox, the scroll jumps to the top. #2785

Closed
@juanjinario

Description

@juanjinario

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions