-
-
Notifications
You must be signed in to change notification settings - Fork 30
Open
Description
Hi @oumoussa98 ,
I have an issue regarding my select component, when adding the infinite scroll to the select component, and instantiate this select multiple time in the same page, when I open the first time a select and I scroll the scroll is reset to the top,
It's working correctly if I opened an other select (the scroll is smooth and didn't trigger any reset).
I am using headless ui, but even without it, I still have the reset scroll on the first select opened,
Any idea ?
<ListboxOptions
as="div"
ref="container"
id="container-div"
class="w-full absolute z-10 bg-white shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm divide-y divide-gray-200"
:class="[minWidthOptionsStyle]"
>
<p v-if="optionsTitle" class="text-xs uppercase text-nilos-gray-light py-1.5 px-3.5">{{ optionsTitle }}</p>
<div v-if="withSearch" class="px-2 py-1.5">
<Input
@keydown.space.stop
class="text-xs"
:placeholder="searchPlaceholder"
v-model="search"
@change="emit('onChangeSearch', search)"
:id="`${label}-search`"
:debounce="debounce"
/>
</div>
<div id="container-scrollable" class="overflow-y-auto h-32">
<ul class="divide-y divide-gray-200">
<SelectOptions :options="options" :displayOptionText="displayOptionText">
<template #prepend="{ option }">
<slot name="prepend" :option="option" />
</template>
<template v-if="!isLessThanDesktopMedium || isAppendInside" #append="{ option }">
<slot name="append" :option="option" />
</template>
</SelectOptions>
<InfiniteLoading @infinite="emit('fetch')" :distance="10" />
</ul>
</div>
<slot name="cta" />
</ListboxOptions>
Metadata
Metadata
Assignees
Labels
No labels