oumoussa98 / vue3-infinite-loading

Infinite scroll component compatible with vuejs-3 and vitejs
https://vue3-infinite-loading.netlify.app/
191 stars 31 forks source link

Reset to the top when scrolling with infinite loading #73

Open SpiritusDeos opened 1 year ago

SpiritusDeos commented 1 year ago

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>
SpiritusDeos commented 1 year ago

@oumoussa98 - do you still continue to update this package ?